<template>
  <div class="wrap">
    <div class="form_wrap">
      <el-col :span="5">
        <label>区域：</label>
        <el-select
          v-model="formData.buildId"
          placeholder="请选择"
          width="200"
        >
          <el-option
            v-for="item in buildData"
            :key="item.buildId"
            :label="item.buildName"
            :value="item.buildId"
          ></el-option>
        </el-select>
      </el-col>
      <el-col :span="5">
        <label>设施系统：</label>
        <el-select v-model="formData.deviceTypePId" placeholder="全部" @change="deviceTypeChange()">
          <el-option
            v-for="item in deviceTypePData"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-col>
      <el-col :span="5">
        <label>设施：</label>
        <el-select v-model="formData.deviceTypeIds" placeholder="全部">
          <el-option
            v-for="item in deviceTypeData"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-col>
      <el-col :span="5">
        <label>设施状态：</label>
        <el-select v-model="formData.deviceState" placeholder="全部">
          <el-option
            v-for="item in deviceStatus"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-col>
      <el-col :span="3">
        <el-button class="search_btn" @click="searchFn()">搜索</el-button>
      </el-col>
    </div>

    <!-- 楼栋楼层数据看板 -->
    <div class="build-alarm-info">
      <div class="alarm-info-title">
        <span class="gg-company-warnTitle">{{buildName}}</span>
        <span
          class="alarm-info-toggle"
          :class="alarmShow ? 'ggicon-arrowBottom' : 'ggicon-arrowTop'"
          @click="alarmShowFn"
        ></span>
      </div>
      <div class="alarm-info-body" v-show="alarmShow">
        <div class="build-floor-alarm">
          <div class="floor-alarm-num floor-num-size">{{theFloorData.alarmState}}</div>
          <div class="floor-alarm-name">火警</div>
        </div>
        <div class="build-floor-warn">
          <div class="floor-warn-num floor-num-size">{{theFloorData.warningState}}</div>
          <div class="floor-warn-name">电气火灾预警</div>
        </div>
        <div class="build-floor-hidden">
          <div class="floor-hidden-num floor-num-size">{{theFloorData.troubleType}}</div>
          <div class="floor-hidden-name">消防设施故障</div>
        </div>
        <div class="build-floor-abnormal">
          <div class="floor-abnormal-num floor-num-size">{{theFloorData.abnormalCount}}</div>
          <div class="floor-abnormal-name">监测设备异常</div>
        </div>
        <div class="build-warp-line"></div>
        <div class="build-weft-line"></div>
      </div>
    </div>
    <!-- 图标列表 -->
    <div class="deviceTypeBox">
      <div class="deviceTypeIcon" :class="isShowIcon ? '': 'deviceTypeIconR'" @click="isShowIcon = !isShowIcon">
        <span>设备图标</span> <img v-show="!isShowIcon" src="../assets/images/fangda.png" alt />
        <img v-show="isShowIcon" src="../assets/images/suoxiao.png" alt />
      </div>
      <ul v-show="isShowIcon">
        <li v-for="(item,index) in deviceTypeList" :key="index" :title="item.name">
          <img :src="item.url" alt /> 
          <span>{{item.simpleName}}</span>
        </li>
      </ul>
    </div>

    <!-- openlayer -->
    <div id="my-map" class="maps">
      <div class="nav-div">
        <div class="floor-nav">
          <a class="icon-lift-up" @click="floorArrowFn(0)">
            <i class="ggicon-arrowTop"></i>
          </a>
          <div class="floor-di">
            <div class="floor-ul-div">
              <ul id="floorNav">
                <li
                  v-for="(item,index) in floorData"
                  :key="index"
                  @click="floorLiFn(index)"
                  :class="[currentFloorId == item.floorId ? 'floor-checked': '',item.alarmState !== 0 ? 'is-error': '', item.warningState !== 0 ? 'is-warning': '', item.troubleType !== 0 ? 'is-trouble': '',]">
                  <a href="javascript:;">
                    <span :title="item.floorName" class="gg-floor-circle">{{item.floorName}}</span>
                  </a>
                </li>
              </ul>
            </div>
          </div>
          <a class="icon-lift-down" @click="floorArrowFn(1)">
            <i class="ggicon-arrowBottom"></i>
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import $Service from "../services/main";
import $ from "jquery";
import iotIcon from "../assets/data/complexDeviceIcons.json"; // 获取图标信息
import special_device_type from "../assets/data/special_device_type.json";
import getIconConfig from "../assets/data/deviceIcons.json";

//监测装置
let waterPumpCode = special_device_type.waterPump;
let smokeMonitor = special_device_type.smokeMonitorCode; //烟感
let fireDoor = special_device_type.fireDoor; //防火门
//水箱 水池 水泵
let waterTank = special_device_type.fireWaterTank;
let waterPool = special_device_type.fireWaterPool;
let waterPump = special_device_type.fireWaterPump;
let waterEnd = special_device_type.fireHydrant_end; //末端
//消火栓
let hydrantIndoor = special_device_type.fireHydrant_indoor;
let hydrantOutUp = special_device_type.fireHydrant_outUp;
let hydrantOutDown = special_device_type.fireHydrant_outDown;
// eslist 不检测
/* eslint-disable */
export default {
  name: "Home",
  data() {
    return {
		isShowIcon: false,
		unitId: "",
		buildId: "",
		// E座
		// unitId: "440604YZDW201912120001",
		// buildId: "440604YZDW201912120001_005",
		// unitId:"440604YZDW202006080001",
		// buildId:"440604YZDW202006080001_001",

		// 判断是否打开高警情
		isHeighAlarm: false, 
		riskAlarmId: "",
		//riskAlarmId: "da66cc2b6ffa42824da374afd48980ed",
		heightAlarmDevices:[],

		alarmShow: true,
		myMap: {},
		baseUrl: "http://192.168.20.175:19835/",
		// baseUrl: "http://61.142.244.16:19835/",
		// baseUrl: "http://47.95.117.185:9836/",
		floorDeviceData: [],
		buildData: [],
		floorData: {},
		//currentFloorId: "440604YZDW202001070001_001_U035",
		currentFloorId: "",
		currentIndex: 0,
		theFloorData: {
			alarmState: 0,
			troubleType: 0,
			abnormalCount: 0,
			warningState: 0
		},
		deviceTypePData: [],
		deviceTypeData: [{ id: "", name: "全部" }],
		deviceStatus: [
			{ id: "", name: "全部" },
			{ id: "0", name: "正常" },
			{ id: "1", name: "报警" },
			{ id: "2", name: "故障" },
			{ id: "98", name: "预警" }
		],
		buildName: "",
		floorLayer: null,
		runState: "",
		markers: null,
		deviceIcons: {},
		currentPopup: null,
		deviceTypeList: [],
		MonitoringObject: "",
		formData: {
			buildId: "",
			deviceTypePId: "",
			deviceTypeIds: "",
			deviceState: ""
		},
		isFloorLoad: false,
    };
  },
  created() {},
    mounted() {
        let that = this;
        // 告诉父页面传值
        let params = {
            type : "gisChild",
            data: "get"
        }
        window.parent.postMessage(params, '*');
        window.addEventListener('message', function (e) {
            if (e.data && e.data.unitId) {
                let data = e.data;
                that.unitId = data.unitId;
                that.buildId = data.buildId;
                that.currentFloorId = data.floorId;
                that.deviceId = data.deviceId;
                that.isHeighAlarm = data.isHeighAlarm === 'true' ? true : false;
                that.riskAlarmId = data.riskAlarmId;
                that.mapInit();
                that.getBuildClassFn();
                that.getIconConfig();
                that.getDevicetypesFn();
            }
        })
				
        // this.mapInit();
        // this.getBuildClassFn();
        // this.getIconConfig();
        // this.getDevicetypesFn();
    },
  methods: {
    // 搜索
    searchFn() {
        this.deviceId = '';
        if (this.formData.buildId != this.buildId) {
            this.buildId = this.formData.buildId;
            this.currentFloorId = '';
            this.getFloorListFn();
        } else {
            this.getEquipmentPoints();
        }
    },

    // 点击显示或隐藏楼栋信息
    alarmShowFn() {
      this.alarmShow = !this.alarmShow;
    },
    //   获取楼栋数据
    getBuildClassFn() {
		let self = this;
      $Service.getTAndAByUnitId(this, { unitId: this.unitId }).then(res => {
        if (res.code === "success") {
					// 当前楼栋
					for (let key in res.data) {
						let build = res.data[key];
						if (build.buildId === self.buildId) {
							this.buildName = build.buildName;
						}
					}
          this.buildData = res.data || [];
          this.formData.buildId = this.buildId;
        }
      });
    },

    // 获取楼层数据
    getFloorListFn() {
      $Service
        .getTAndAByUnitIdAndBuildId(this, {
          unitId: this.unitId,
          buildId: this.buildId
        })
        .then(res => {
          if (res.code === "success" && res.data.length != 0) {
            let data = res.data;
            this.floorData = data || [];
            this.loadSideFloorNav(data);
            
          }
        });
    },

    // 获取楼层对应的点位数据
    getEquipmentPoints() {
		    let that = this;
        // 判断是否获取高警情的数据
        if(this.isHeighAlarm){
          $Service.getHeightAlarmDeviceListBYCondition(this, {
            riskAlarmId: this.riskAlarmId,
            unitId: this.unitId,
            floorId: this.currentFloorId,
            buildId: this.buildId,
            deviceTypeIds: this.formData.deviceTypeIds,
            runState: this.formData.deviceState,
            highAlarmdeviceId: this.deviceId
          }).then(res => {
            if (res.code === "success") {
              let data = res.data.deviceList || [];
              that.floorDeviceData = data;
              that.heightAlarmDevices = res.data.highRiskList.data;
              this.addMarkers(data);
            }
          });
        }else{
          $Service.getDeviceListByCondition(this, {
            unitId: this.unitId,
            floorId: this.currentFloorId,
            buildId: this.buildId,
            deviceTypeIds: this.formData.deviceTypeIds,
            runState: this.formData.deviceState,
            deviceId: this.deviceId
          }).then(res => {
            if (res.code === "success") {
              let data = res.data || [];
              that.floorDeviceData = data;
              this.addMarkers(data);
            }
          });
        }

    },
    
    // 获取设备图标配置信息
    getIconConfig() {
      let that = this;
        let res = getIconConfig
        that.initSymbols(res && res.deviceIcons).then(function(obj) {
            that.deviceIcons = obj;
            // 获取楼层信息
            that.getFloorListFn();
        });
    },

    // 初始化符号库
    initSymbols(icons) {
      let mapObj = {};
      let dtd = $.Deferred();
      let iconKeys = Object.keys(icons);
      for (let key in icons) {
        for (let key1 in icons[key]) {
          this.loadImg(icons[key][key1], key + "_" + key1).then(function(
            symbol,
            key
          ) {
            mapObj[key] = symbol;
            let mapObjKeys = Object.keys(mapObj);
            if (iconKeys.length == mapObjKeys.length) {
              dtd.resolve(mapObj);
            }
          });
        }
      }
      return dtd;
    },

    // load 图标的方法
    loadImg(imgSrc, key) {
      let dtd = $.Deferred();
      let img = new Image();
      if (!imgSrc.icon) {
        dtd.resolve("", key);
        return dtd;
      }
      img.src = "data:image/jpg;base64," + imgSrc.icon;
      img.onload = function() {
        let w = img.width;
        let h = img.height + 4;
        let markerSymbol = {
          source: img.src,
          width: w,
          height: h,
          offsetX: w / 2,
          offsetY: h / 2
        };
        dtd.resolve(markerSymbol, key);
      };
      return dtd;
    },

    // 获取设备类型列表
    getDevicetypesFn() {
      $Service.getDevicetypes(this, { deviceTypeId: "" }).then(res => {
        let data = res["data"] || [];
        this.deviceTypePData = this.toTreeData(data);
      });
    },

    // 选择设施系统
    deviceTypeChange() {
      this.formData.deviceTypeIds = "";
      if (this.formData.deviceTypePId) {
        for (let i = 0, len = this.deviceTypePData.length; i < len; i++) {
          if (this.formData.deviceTypePId === this.deviceTypePData[i].id) {
            this.deviceTypeData = this.deviceTypePData[i].children;
          }
        }
        let typeId = "";
        for (let i = 0, len = this.deviceTypeData.length; i < len; i++) {
          typeId += this.deviceTypeData[i].id + ",";
        }
        this.formData.deviceTypeIds = typeId.substring(0,typeId.lastIndexOf(","));
        if(this.deviceTypeData[0].name === "全部"){
            this.deviceTypeData.shift();
        }
        this.deviceTypeData.unshift({
            id: this.formData.deviceTypeIds,
            name: "全部"
        });
      }
    },

    // 格式化设备类型数据
    toTreeData(data) {
      let pos = {};
      let tree = [];
      let i = 0;
      while (data.length != 0) {
        if (data[i].parientId == -1) {
          tree.push({
            id: data[i].id,
            name: data[i].name,
            children: []
          });
          pos[data[i].id] = [tree.length - 1];
          data.splice(i, 1);
          i--;
        } else {
          var posArr = pos[data[i].parientId];
          if (posArr != undefined) {
            var obj = tree[posArr[0]];
            for (var j = 1; j < posArr.length; j++) {
              obj = obj.children[posArr[j]];
            }

            obj.children.push({
              id: data[i].id,
              name: data[i].name,
              children: []
            });
            pos[data[i].id] = posArr.concat([obj.children.length - 1]);
            data.splice(i, 1);
            i--;
          }
        }
        i++;
        if (i > data.length - 1) {
          i = 0;
        }
      }
      if (tree[0]) {
        tree = tree[0].children;
        tree.unshift({ id: "", name: "全部" });
      }
      return tree;
    },

    //   初始化 openlayer map
    mapInit() {
      this.myMap = new OpenLayers.Map({
        projection: "EPSG:3857", // 设置地图坐标系
        level: 5,
        center: [13055397.563187543, 3710327.453552903],
        maxZoom: 8,
        minZoom: 3,
        controls: [
          new OpenLayers.Control.Navigation({
            dragPanOptions: {
              enableKinetic: false
            }
          })
        ],
        div: "my-map"
      });

      // 监听点击事件，控制弹框显示和隐藏
      this.myMap.events.register("click", this, function(e) {
        if (this.currentPopup && e.target.className === "olTileImage") {
          this.myMap.removePopup(this.currentPopup);
        }
      });
    },

    // 加载楼层导航
    loadSideFloorNav(floorArr) {
      for (let key in floorArr) {
        let floor = floorArr[key];

        // 初始化li显示位置
        if (!this.currentFloorId && (floor.alarmState != 0 || floor.troubleType != 0)) {
            this.theFloorData = floor;
            this.currentFloorId = floor.floorId;
            this.currentIndex = key;
            let num = parseInt(key/8);
            this.floorArrowFn('',num)
        }else if (this.currentFloorId === floor.floorId){
            this.theFloorData = floor;
            this.currentIndex = key;
            let num = parseInt(key/8);
            this.floorArrowFn('',num)
        }
      }
      
      if (!this.currentFloorId) {
        this.currentIndex = 0;
        this.currentFloorId = floorArr[0].floorId;
        this.theFloorData = floorArr[0];
            let num = parseInt(this.currentIndex/8);
            this.floorArrowFn('',num)
      }

      let picUrl = floorArr[this.currentIndex].floorAreaImg;
      // let picUrl = this.theFloorData.floorAreaImg;
      if (!picUrl) {
        this.$message.error("没有楼层图片！");
        return;
      }
      this.addPicToMap(picUrl); //切换楼层图
    },

    // 楼层导航点击上下箭头事件 idx=0 表示向上箭头， idx =1 表示向下箭头
    floorArrowFn(idx, num) {
        let that = this;
        if(this.isFloorLoad) return;
        this.isFloorLoad = true;
        var ulObj = $("#floorNav");
        let liH = ulObj.find("li").outerHeight(true);
        var step = 8 * liH; //步长
        let ulTop = ulObj.position().top;
        var ulHeight = liH * this.floorData.length; //左侧楼梯ul高度
        if (idx === 0) {      // 上移
            if (ulTop < 0 && step < ulHeight && ulTop + step < ulHeight) {
                ulObj.animate({ top: ulTop + step });
            }
        } else if (idx === 1) {   // 下移
            if (-ulTop + step < ulHeight) {
            ulObj.animate({ top: ulTop - step });
            }
        }else if (idx === ''){    // 跳转自动定位
            ulObj.animate({ top: - num * 40 * 8 });
        }
        setTimeout(function(){
            that.isFloorLoad = false;
        },500)
    },

    // 楼层点击事件
    floorLiFn(idx,id) {
        this.deviceId = id || '';
        this.theFloorData = this.floorData[idx];
        let picUrl = this.theFloorData.floorAreaImg;
        if (!picUrl) {
            this.$message.error("没有楼层图片！");
            return;
        }
        this.currentFloorId = this.theFloorData.floorId;
        this.currentIndex = idx;
        this.addPicToMap(picUrl); //切换楼层图
    },

    // 加载楼层图
    addPicToMap(picUrl) {
      let that = this;
      // 清除楼层图层和点位
      this.clearFloor();
      var imgUrl = this.baseUrl + "image/floorImage/" + picUrl;
      var img = new Image();
      img.src = imgUrl;
      img.onload = function() {
        var w = img.width * 1000 || 1320300;
        var h = img.height * 1000 || 462300;
        that.floorLayer = new OpenLayers.Layer.Image(
          "popupMatrix",
          imgUrl,
          new OpenLayers.Bounds(0, 0, w, h),
          new OpenLayers.Size(700, 250),
           {wrapDateLine:false}
        );
        that.myMap.addLayer(that.floorLayer);
        that.myMap.zoomToMaxExtent();
        // 获取点位
        that.getEquipmentPoints();
      };
    },

    // 清除楼层图
    clearFloor() {
      if (this.floorLayer) {
        this.myMap.removeLayer(this.floorLayer);
        this.floorLayer = null;
      }
      this.clearMarks();
    },

    // 清除标点
    clearMarks() {
      if (this.markers) {
        this.myMap.removeLayer(this.markers);
        this.markers = null;
      }
      if (this.currentPopup) {
        this.myMap.removePopup(this.currentPopup);
        this.currentPopup = null;
      }
    },

    /**
     * 根据设备类型和状态获取图标url
     * @param type 设备类型(1：烟感设备，2：水压监测)
     * @param status 设备状态
     */
    getIconUrl(type, status) {
        if(this.deviceIcons[status + "_" + type]) {
            var iconObj = JSON.parse(JSON.stringify(this.deviceIcons[status + "_" + type]));
            if (iconObj) return iconObj;
        } else{
            console.log("缺少点位：" + type);
        }
        return;
    },

    // 添加点位
    addMarkers(data) {
      let ll,
        icon,
        deviceTypeIdArr = [],
        iconUrl = "";
      this.deviceTypeList = [];
      let calculateOffset = function(size) {
        return new OpenLayers.Pixel(-(size.w / 2), -size.h);
      };
      // 重绘时清除点位
      this.clearMarks();
      this.markers = new OpenLayers.Layer.Markers();
      this.myMap.addLayer(this.markers);
      for (let key in data) {
        let equip = data[key];
        if(equip["longitude"] && equip["latitude"]){
            let status = "normal";
            if (equip["runState"] == "1") { //报警
              status = "calltheplice";
            } else if (equip["runState"] == "2") {
              status = "fault";
            } else if (equip["runState"] == "98") {
              status = "warning";
            }
            
            iconUrl = this.getIconUrl(equip["deviceTypeId"], status);
            if (deviceTypeIdArr.indexOf(equip["deviceTypeId"]) === -1) {
                deviceTypeIdArr.push(equip["deviceTypeId"]);
                if (equip["deviceTypeId"] === "06010000") {
                    iconUrl.source =
                    "";
                }
                if(iconUrl && iconUrl.source){
                    this.deviceTypeList.push({
                        url: iconUrl.source,
                        name: equip.deviceTypeName,
                        simpleName:
                        equip.deviceTypeName.length > 11
                            ? equip.deviceTypeName.substring(0, 10) + "..."
                            : equip.deviceTypeName
                    });
                }
            }
            //判断物联网设备点
            if (equip.list1 !== "") {
              //物联网主体状态
              //主框消防设施 副框为监测装置
              status = "monitorNormal_deviceNormal";
    
              var iot_typeId = equip.deviceTypeId;
              var equipList = JSON.parse(equip.list1);
              if (equip.runState === "98") {
                //主体预警
                for (var i = 0; i < equipList.length; i++) {
                  if (
                    equipList[i].onlineState !== "1" ||
                    equipList[i].runState == "5"
                  ) {
                    status = "monitorOffline_deviceWarning"; //预警 离线、未接入
                  } else {
                    if (equipList[i].runState === "1") {
                      status = "monitorTrouble_deviceWarning"; //预警 故障
                      continue;
                    } else {
                      if (status == "monitorNormal_deviceNormal") {
                        status = "monitorNormal_deviceWarning"; //预警 正常
                      }
                    }
                  }
                }
              } else if (equip.runState === "2") {
                //主体故障
                for (var i = 0; i < equipList.length; i++) {
                  if (
                    equipList[i].onlineState !== "1" ||
                    equipList[i].runState == "5"
                  ) {
                    status = "monitorOffline_deviceTrouble"; //故障 离线、未接入
                  } else {
                    if (equipList[i].runState === "1") {
                      status = "monitorTrouble_deviceTrouble"; //故障 故障
                      continue;
                    } else {
                      if (status == "monitorNormal_deviceNormal") {
                        status = "monitorNormal_deviceTrouble"; //故障 正常
                      }
                    }
                  }
                }
              } else {
                //主体正常
                for (var i = 0; i < equipList.length; i++) {
                  if (
                    equipList[i].onlineState !== "1" ||
                    equipList[i].runState == "5"
                  ) {
                    status = "monitorOffline_deviceNormal"; //正常 离线、未接入
                  } else {
                    if (equipList[i].runState === "1") {
                      status = "monitorTrouble_deviceNormal"; //正常 故障
                      continue;
                    }
                  }
                }
              }
              //修改图标路径
              if (iotIcon[status]) {
                if (iotIcon[status][iot_typeId]) {
                  iconUrl.source =
                    "data:image/jpg;base64," + iotIcon[status][iot_typeId].icon;
                } else {
                  if (equip["runState"] == "1") {
                    //报警
                    status = "calltheplice";
                    iconUrl = this.getIconUrl(equip["deviceTypeId"], status);
                  } else if (equip["runState"] == "2") {
                    status = "fault";
                    iconUrl = this.getIconUrl(equip["deviceTypeId"], status);
                  } else if (equip["runState"] == "98") {
                    status = "warning";
                    iconUrl = this.getIconUrl("19050000", status);
                  }
                }
              } else {
                if (equip["runState"] == "1") {
                  //报警
                  status = "calltheplice";
                  iconUrl = this.getIconUrl(equip["deviceTypeId"], status);
                } else if (equip["runState"] == "2") {
                  status = "fault";
                  iconUrl = this.getIconUrl(equip["deviceTypeId"], status);
                } else if (equip["runState"] == "98") {
                  status = "warning";
                  iconUrl = this.getIconUrl("19050000", status);
                }
              }
            } else if (equip.list2 !== "") {
              //物联网设备状态
              //主框监测装置 副框消防设施
              status = "monitorNormal_deviceNormal";
              var iot_typeId = equip.deviceTypeId;
              if (equip.onlineState !== 1 || equip.runState == "5") {
                if (JSON.parse(equip.list2)[0].runState === "2") {
                  //离线、未接入 故障
                  status = "monitorOffline_deviceTrouble";
                } else if (JSON.parse(equip.list2)[0].runState === "98") {
                  //离线、未接入 预警
                  status = "monitorOffline_deviceWarning";
                } else {
                  //离线 正常
                  status = "monitorOffline_deviceNormal";
                }
              } else {
                if (equip.runState === "2") {
                  if (JSON.parse(equip.list2)[0].runState === "2") {
                    //故障 故障
                    status = "monitorTrouble_deviceTrouble";
                  } else if (JSON.parse(equip.list2)[0].runState === "98") {
                    //故障 预警
                    status = "monitorTrouble_deviceWarning";
                  } else {
                    //故障 正常
                    status = "monitorTrouble_deviceNormal";
                  }
                } else if (equip.runState === "98") {
                  //设备状态不完善 完善后删除
                  status = "warning";
                  iconUrl = this.getIconUrl(equip["deviceTypeId"], status);
                } else {
                  if (JSON.parse(equip.list2)[0].runState === "2") {
                    //正常 故障
                    status = "monitorNormal_deviceTrouble";
                  } else if (JSON.parse(equip.list2)[0].runState === "98") {
                    //正常 预警
                    status = "monitorNormal_deviceWarning";
                  }
                }
              }
    
              if (iotIcon[status]) {
                if (iotIcon[status][iot_typeId]) {
                  iconUrl.source =
                    "data:image/jpg;base64," + iotIcon[status][iot_typeId].icon;
                } else {
                  if (equip["runState"] == "1") {
                    //报警
                    status = "calltheplice";
                    iconUrl = this.getIconUrl(equip["deviceTypeId"], status);
                  } else if (equip["runState"] == "2") {
                    status = "fault";
                    iconUrl = this.getIconUrl(equip["deviceTypeId"], status);
                  } else if (equip["runState"] == "98") {
                    status = "warning";
                    iconUrl = this.getIconUrl("19050000", status);
                  }
                }
              } else {
                if (equip["runState"] == "1") {
                  //报警
                  status = "calltheplice";
                  iconUrl = this.getIconUrl(equip["deviceTypeId"], status);
                } else if (equip["runState"] == "2") {
                  status = "fault";
                  iconUrl = this.getIconUrl(equip["deviceTypeId"], status);
                } else if (equip["runState"] == "98") {
                  status = "warning";
                  iconUrl = this.getIconUrl("19050000", status);
                }
              }
            } else {
              if (equip["runState"] == "1") {
                //报警
                status = "calltheplice";
              } else if (equip["runState"] == "2") {
                status = "fault";
              } else if (equip["runState"] == "98") {
                status = "warning";
              }
    
              switch (equip["deviceTypeId"]) {
                case "19010000": //物联网用户信息传输装置
                case "19020000": //室内消火栓水压监测
                case "19030000": //室外消火栓水压监测
                case "19050000": //电气火灾监控装置
                case "19080000": //喷淋末端自动试水
                case "19120000": //防火门状态监测
                case "19150000": //水位传感器
                case "19210000": //独立式感烟探测器
                case "19220000": //独立式感温探测器
                case "19230000": //独立式可燃气体探测器
                  if (equip["onlineState"] !== 1 || equip["runState"] == "5") {
                    status = "offline";
                  }
                  break;
              }
              iconUrl = this.getIconUrl(equip["deviceTypeId"], status);
            }
            if (equip.runState == 1) {
              iconUrl = {
                source: require("../assets/images/11.gif"),
                width: 42,
                height: 42
              };
            }
  

          // 判断该点是否属于高警情点位
          switch(equip.isHighAlarm){
            case "1":
              // 高警情首报点位
              iconUrl = {
                source: require("../assets/images/firstAlarm.png"),
                width: 32,
                height: 32
              };
              break;
            case "2":
              // 高警情相邻点位
              iconUrl = {
                source: require("../assets/images/otherAlarm.png"),
                width: 32,
                height: 32
              };
              break;
            default:
              break;
          }

          if (iconUrl) {
            var sz = new OpenLayers.Size(iconUrl.width, iconUrl.height); //尺寸大小
            icon = new OpenLayers.Icon(iconUrl.source, sz, null, calculateOffset);
            ll = new OpenLayers.LonLat(equip["longitude"], equip["latitude"]);
              this.addMarker(ll, equip, icon);
          }
        }
      }
    },

    // 打点方法封装
    addMarker(ll, item, icon) {
      let that = this;
      var feature = new OpenLayers.Feature(this.markers, ll, {
        icon: icon.clone()
      });
      // feature.closeBox = true;
      feature.data.overflow = "auto";
      feature.popupClass = OpenLayers.Class(OpenLayers.Popup.Anchored, {
        autoSize: true
      });
      feature.data.tag = item;

      var marker = feature.createMarker();
      var markerClick = function(evt) {
        if (that.currentPopup) {
          that.myMap.removePopup(that.currentPopup);
          that.currentPopup = this.popup = null;
        }
        if (this.popup == null) {
          this.popup = this.createPopup(this.closeBox);
          that.currentPopup = this.popup;
          that.showWindow(this.data.tag);
        } else {
          this.popup.toggle();
        }
        OpenLayers.Event.stop(evt);
      };
      this.markers.addMarker(marker);
      marker.events.register("mousedown", feature, markerClick);
        if(item.deviceId === that.deviceId){
          
            setTimeout(function(){
                marker.events.triggerEvent("mousedown",markerClick)
            },500)
        }
    },

    // 监测装置封装
    monitoringDevice(data) {
        var that = this;
        var html_addUnit = "";
        for (let i = 0; i < data.length; i++) {
            html_addUnit += "<li>监测装置" + (i + 1) + "</li>";
        }
        $("#add_deviceUnit").html(html_addUnit);
        $("#add_deviceUnit li:first").addClass("add-unit-active");
        //默认第一个设施信息
        if (data[0]) {
            var data_click = data[0];
        } else {
            var data_click = data;
        }
        if (data_click.measurement !== "") {
            var m_mpa_alert = JSON.parse(data_click.measurement);
        }

        if ("" + data_click.onlineState === "1") {
            switch (data_click.runState) {
            case "0":
                $("#currentState_alert").html("正常");
                $(".gg-prober-group-alert").addClass("gg-normal-item");
                break;
            case "1":
                $("#currentState_alert").html("报警");
                $(".gg-prober-group-alert").addClass("gg-alarm-item");
                break;
            case "2":
                $("#currentState_alert").html("故障");
                $(".gg-prober-group-alert").addClass("gg-prober-item");
                break;
            case "5":
                $("#currentState_alert").html("异常");
                $(".gg-prober-group-alert").addClass("gg-abnormal-item");
                break;
            case "96":
                $("#currentState_alert").html("开启");
                $(".gg-prober-group-alert").addClass("gg-prober-item");
                break;
            case "97":
                $("#currentState_alert").html("关闭");
                $(".gg-prober-group-alert").addClass("gg-prober-item");
                break;
            case "98":
                $("#currentState_alert").html("预警");
                $(".gg-prober-group-alert").addClass("gg-warning-item");
                break;
            }
            // if (m_mpa_alert && m_mpa_alert[1]) {
            //     $("#currentM_alert").html(m_mpa_alert[1].measurement);
            //     $("#currentMpa_alert").html(m_mpa_alert[1].measurement);
            // }
        } else {
            $(".gg-prober-group-alert").removeClass();
            $("#currentState_alert").html("");
        }

        $("#add_deviceTitle").html(data_click.deviceTypeName);

        let deviceTypeId = data_click.deviceTypeId;
        switch (deviceTypeId) {
            case "19010000":
            case "19020000":
            case "19030000":
            case "19050000":
            case "19080000":
            case "19120000":
            case "19150000":
            case "19210000":
            case "19220000":
            case "19230000":
            $("#add_onlineState").html(
                "" + data_click.onlineState === "0"
                ? "离线"
                : "" + data_click.onlineState === "1"
                ? "在线"
                : "未接入"
            );
            if ("" + data_click.onlineState !== "1") {
                $("#add_onlineState")
                .parent()
                .removeClass("gg-online-item")
                .addClass("gg-outline-item");
                $(".add-prober-body .gg-prober-group").hide();
            }
            break;
        }

        if (data_click.isCTerminal === 1) {
            $("#add_deviceTitle1").html(
            (data_click.homeAddress || "") +
                (data_click.deviceAddress || "")
            );
            $("#add_deviceTitle1").attr(
            "title",
            (data_click.homeAddress || "") +
                (data_click.deviceAddress || "")
            );
        } else {
            $("#add_deviceTitle1").html(
            (data_click.buildName || "") +
                (data_click.floorName || "") +
                (data_click.deviceAddress || "")
            );
            $("#add_deviceTitle1").attr(
            "title",
            (data_click.buildName || "") +
                (data_click.floorName || "") +
                (data_click.deviceAddress || "")
            );
        }
        $("#add_deviceId").html(data_click.deviceId);
        $("#add_deviceBrand").html(data_click.brand + data_click.model);
        $("#add_controlHost").html(data_click.controlHost || "--");
        $("#add_deviceAccident").html(data_click.measurement);
        //默认第一个异常记录
        this.add_abnormal(data_click.deviceId);

        //实时读数
        this.deviceCur(data_click.deviceId);

        //监测曲线 装置展开不再请求
        if (
            deviceTypeId != "01010000" &&
            deviceTypeId != "06010000" &&
            deviceTypeId != "06030000" &&
            deviceTypeId != "06040000" &&
            deviceTypeId != "07100000" &&
            deviceTypeId != "05010000" &&
            deviceTypeId != "05020000" &&
            deviceTypeId != "05030000"
        ) {
            that.devicemAFn(data_click.deviceId,deviceTypeId,"7","1",data_click.runState,"" + data_click.onlineState);
            //echart 副框天数切换
            var add_capuse_time = $(".add-capuse-time .gg-capuse-time--item");
            add_capuse_time.click(function() {
                add_capuse_time.removeClass("is-active");
                $(this).addClass("is-active");

                //查询24小时内 还是 一周内的
                var value = $(this).attr("id");
                //加载电流 线缆温度echarts
                that.devicemAFn(
                    data_click.deviceId,
                    deviceTypeId,
                    value,
                    data["runState"],
                    "" + data.onlineState
                );
            });
        }

        //切换监测装置
        $("#add_deviceUnit li").click(function() {
            $("#add_deviceUnit li").removeClass("add-unit-active");
            $(this).addClass("add-unit-active");

            //设施信息
            var data_click = data[$(this).index()];
            let currentText = '';
            let currentClass = '';
            if ("" + data_click.onlineState === "1") {
                switch (data_click.runState) {
                    case "0":
                        currentText = "正常";
                        currentClass = "gg-normal-item";
                    break;
                    case "1":
                        currentText = "报警";
                        currentClass = "gg-alarm-item";
                    break;
                    case "2":
                        currentText = "故障";
                        currentClass = "gg-prober-item";
                    break;
                    case "5":
                        currentText = "异常";
                        currentClass = "gg-abnormal-item";
                    break;
                    case "96":
                        currentText = "开启";
                        currentClass = "gg-prober-item";
                    break;
                    case "97":
                        currentText = "关闭";
                        currentClass = "gg-prober-item";
                    break;
                    case "98":
                        currentText = "预警";
                        currentClass = "gg-warning-item";
                    break;
                }
                $("#currentState_alert").html(currentText + 'ttt');
                $("#currentState_alert").parent().removeClass().addClass(currentClass);
            } else {
            $("#currentState_alert").html("");
            $("#currentState_alert")
                .parent()
                .removeClass();
            }

            $("#add_deviceTitle").html(data_click.deviceTypeName);

            let deviceTypeId = data_click.deviceTypeId;
            switch (deviceTypeId) {
            case "19010000":
            case "19020000":
            case "19030000":
            case "19050000":
            case "19080000":
            case "19120000":
            case "19150000":
            case "19210000":
            case "19220000":
            case "19230000":
                $("#add_onlineState").html(
                "" + data_click.onlineState === "0"
                    ? "离线"
                    : "" + data_click.onlineState === "1"
                    ? "在线"
                    : "未接入"
                );
                if ("" + data_click.onlineState !== "1") {
                $("#add_onlineState")
                    .parent()
                    .removeClass("gg-online-item")
                    .addClass("gg-outline-item");
                $(".add-prober-body .gg-prober-group").hide();
                }
                break;
            }

            if (data_click.isCTerminal === 1) {
            $("#add_deviceTitle1").html(
                (data_click.homeAddress || "") +
                (data_click.deviceAddress || "")
            );
            $("#add_deviceTitle1").attr(
                "title",
                (data_click.homeAddress || "") +
                (data_click.deviceAddress || "")
            );
            } else {
            $("#add_deviceTitle1").html(
                (data_click.buildName || "") +
                (data_click.floorName || "") +
                (data_click.deviceAddress || "")
            );
            $("#add_deviceTitle1").attr(
                "title",
                (data_click.buildName || "") +
                (data_click.floorName || "") +
                (data_click.deviceAddress || "")
            );
            }
            $("#add_deviceId").html(data_click.deviceId);
            $("#add_deviceBrand").html(data_click.brand + data_click.model);
            $("#add_controlHost").html(data_click.controlHost || "--");

            //异常记录
            that.add_abnormal(data_click.deviceId);

            //实时读数
            that.deviceCur(data_click.deviceId);

            //监测曲线
            that.devicemAFn(
            data_click.deviceId,
            deviceTypeId,
            "7",
            "1",
            data_click.runState,
            "" + data_click.onlineState
            );
        });
    },


    //物联网 监测装置 异常记录
    add_abnormal(deviceId) {
        let that = this;
        $Service.getExceptionRecord(that, { unitId: that.unitId, deviceId: deviceId })
        .then(res => {
        if (res.code == "success" && res.data.length > 0) {
            let html = "";
            let abnormalData = res.data;
            for (let i = 0; i < abnormalData.length; i++) {
            let abnormalTime = abnormalData[i].deviceTime
                ? abnormalData[i].deviceTime
                : "--";
            html +=
                '<li class="abli"><span class="abli-text">' +
                (abnormalData[i].faultDescribe || "--") +
                '</span><span class="abli-date">' +
                abnormalTime +
                "</span></li>";
            }
            $("#add_deviceAccident").html(html);
        } else {
            $("#add_deviceAccident").html("暂无数据");
        }
        });
    },

    // 显示弹框
    showWindow(element) {
		let that = this;
		let data = element;
		if (data["runState"] == "1") {
			status = "报警";
		} else if (data["runState"] == "2") {
			status = "故障";
		} else {
			status = "正常";
		}
		let deviceTypeId = data["deviceTypeId"];
    let tooltipTemplate = "";
    
		if (data.monitoringObject == "") {
			switch (deviceTypeId) {
				case "19020000":
				case "19030000":
				case "19050000":
				case "19080000":
				case "19150000":
				case "05100000": //水压传感器（非独立式）
				case "05100100": //室内消火栓系统水压传感器（非独立式）
				case "05100200": //室外消火栓系统水压传感器（非独立式）
				case "05100300": //自动喷水灭火系统水压传感器（非独立式）
				case "05110000": //水位传感器（非独立式）
				case "19180000": //消防泵启停装置
					tooltipTemplate = that.iot_facility(
						deviceTypeId,
						data.list1,
						data.list2
					);
					break;
				default:
					if(data.isHighAlarm == "1" || data.isHighAlarm == "2" ){
						tooltipTemplate = that.heightAlarmDialog();
					}else{
						tooltipTemplate = that.iot_device( deviceTypeId, data.list1, data.list2 );
					}
					break;
			}
		} else {
			//有值 装置弹出设备
			tooltipTemplate = that.iot_facility(deviceTypeId, data.list1, data.list2);
		}

		// 加载弹框
		this.currentPopup.contentHTML = tooltipTemplate;
			this.myMap.addPopup(this.currentPopup);
			this.currentPopup.show();
		
		if (data.list1 !== "" || data.list2 !== "") {
			$(".olPopup").width();
			$(".olPopup").addClass("olPopupToggle")
		}

		//设备id
		var deviceId = data["deviceId"];

		//加载设备基本信息
		that.deviceInfoFn(deviceId);

		if( data.isHighAlarm == "1" || data.isHighAlarm == "2" ){
			that.heightAlarmInfo(data);
			$(".olPopup,.olPopupContent").addClass('olPopupHeightAlarm');
		}

		// 高警情查看相邻点位事件
    var showBtns = $(".showOtherBtn");
    showBtns.unbind("click");
    showBtns.bind("click",function(){
        if(!$(this).hasClass("selfDeviceBtn")){
            var showDeviceId = $(this).attr("deviceId"), showFloorId = $(this).attr("floorId");
            // if(showFloorId == that.currentFloorId){
            //     for (let i = 0, len = that.floorDeviceData.length; i < len; i++) {
            //       let element = that.floorDeviceData[i];
            //       if(element.deviceId === showDeviceId){
            //           that.showWindow(element)
            //       }
            //     }
            // }else{
            //     // 切楼层找相邻点
            //     for (let i = 0, len = that.floorData.length; i < len; i++) {
            //       let item = that.floorData[i];
            //       if(item.floorId === showFloorId){
            //         that.floorLiFn(i, showDeviceId);
            //         break;
            //       }
            //     }

            // }
            // 切楼层找相邻点
              for (let i = 0, len = that.floorData.length; i < len; i++) {
                let item = that.floorData[i];
                if(item.floorId === showFloorId){
                  that.floorLiFn(i, showDeviceId);
                  break;
                }
              }
            
        }
    });

		//加载水压水位电流数据 echarts
		switch (deviceTypeId) {
			case hydrantIndoor:
			case hydrantOutUp:
			case hydrantOutDown:
			case "01010000": // 配电箱
			case "01020000": //供电末端配电箱
			case "01030000": //末端配电箱切换装置
			case waterTank:
			case waterEnd:
			case waterPool:
			case waterPump:
			case "19150000": //水位
			case "19020000": //室内水压监测
			case "19030000": //室外水压监测
			case waterPumpCode: //泵
			case "19050000": //电气火灾
			case "19080000": //喷淋末端
			case "19180000": //消防泵启停监测装置  消防泵
			case "05100000": //水压传感器（非独立式）
			case "05100100": //室内消火栓系统水压传感器（非独立式）
			case "05100200": //室外消火栓系统水压传感器（非独立式）
			case "05100300": //自动喷水灭火系统水压传感器（非独立式）
			case "05110000": //水位传感器（非独立式）
				that.devicemAFn(
					deviceId,
					deviceTypeId,
					"7",
					data["runState"],
					"" + data["onlineState"]
				);
			break;
		}
		//实时读数
		if (
			deviceTypeId == "19050000" ||
			deviceTypeId == "01010000" ||
			deviceTypeId == "01020000" ||
			deviceTypeId == "01030000"
		) {
			that.deviceCur(deviceId);
		}

		if ("" + data["onlineState"] === "1") {
			if (data["runState"] == "0") {
				//正常
				$("#currentState").html("正常");
				} else if (data["runState"] == "1") {
				//报警
				$("#currentState").html("报警");
				$("#currentState, #currentMpa").parent().removeClass("gg-normal-item").addClass("gg-alarm-item");
				} else if (data["runState"] == "2") {
				//故障
				$("#currentState").html("故障");
				$("#currentState, #currentMpa").parent().removeClass("gg-normal-item").addClass("gg-fault-item");
			} else if (data["runState"] == "96") {
				if (deviceTypeId == fireDoor) {
					$("#currentState").html("开启");
					$("#currentState")
					.parent()
					.removeClass("gg-normal-item")
					.addClass("gg-prober-item");
				}
			} else if (data["runState"] == "97") {
				if (deviceTypeId == fireDoor) {
					$("#currentState").html("关闭");
					$("#currentState")
					.parent()
					.removeClass("gg-normal-item")
					.addClass("gg-prober-item");
				}
			} else if (data["runState"] == "98") {
				$("#currentState").html("预警");
				$("#currentState")
					.parent()
					.removeClass("gg-normal-item")
					.addClass("gg-warning-item");
				} else if (data["runState"] == "5") {
				$("#currentState").html("异常");
				$("#currentState, #currentMpa").parent().removeClass("gg-normal-item").addClass("gg-abnormal-item");
			}
		} else {
			$("#currentState")
			.parent()
			.removeClass("gg-normal-item");
			$("#currentState").html("");
		}

		//电器火灾探测器弹窗面板 选项卡点击事件
		var prober_btn = $(".gg-prober-content .gg-btn-capsule");
		var prober_unit = $(".gg-prober-model .gg-prober-unit");

		//物联网设备 选项卡点击事件
		$(".add-btn-capsule").click(function() {
			$(".add-btn-capsule").removeClass("add-is-active");
			$(this).addClass("add-is-active");
			$(".add-prober-unit").hide();
			var capsure_click = $(this).index();
			$(".add-prober-unit")
			.eq(capsure_click)
			.show();
		});

		//物联网监测装置显隐
		let olPopupW = $(".olPopup").width();
		$(".toggle-warnNum-dialog").click(function() {
			// 重新设置弹框宽度
			if ($(".add-warnNum-dialog").is(":hidden")) {
			//   $(".olPopup").width(olPopupW * 2);
				// $(".olPopup").width(olPopupW * 2);
				$(".olPopup,.olPopupContent").addClass('olPopupW2');
			} else {
			//   $(".olPopup").width(olPopupW);
				$(".olPopup,.olPopupContent").removeClass('olPopupW2');
			}

			$(".toggle-warnNum-dialog .ggicon-back").css(
			"transform",
			"rotate(90deg)"
			);
			$(".add-warnNum-dialog").toggle();
			if ($(".add-warnNum-dialog").is(":visible")) {
			$(".toggle-warnNum-dialog .ggicon-back").css(
				"transform",
				"rotate(-90deg)"
			);
			if (that.MonitoringObject === "") {
				$Service
				.getMonitoringObject(that, {
					unitId: that.unitId,
					deviceId: deviceId
				})
				.then(res => {
					if (res.code === "success") {
					var data = res.data;
					that.monitoringDevice(data);
					}
				});
			} else {
				$Service
				.getDeviceByMonitoringObject(that, {
					unitId: that.unitId,
					deviceId: deviceId
				})
				.then(res => {
					if (res.code === "success") {
					var data = res.data;
					that.monitoringDevice(data);
					}
				});
			}
			}
		});

		prober_unit.eq(0).show();
		if (deviceTypeId == "19050000") {
			if ($(this).index() == 1) {
			$(".gg-capuse-time").show();
			} else {
			$(".gg-capuse-time").hide();
			}
		}
		prober_btn.click(function() {
			prober_btn.removeClass("is-active");
			prober_unit.removeClass("is-active");
			$(this).addClass("is-active");

			if ($(this).attr("name") == "accidRecord") {
				//加载异常记录列表  查询前四条 传递0
				if (deviceTypeId != fireDoor) {
					that.deviceAccidentInfo(deviceId);
				}
			}

			prober_unit.hide();
			prober_unit.eq($(this).index()).show();

			//sheshi
			if (deviceTypeId == "19050000") {
				if ($(this).index() == 1) {
					$(".gg-capuse-time").show();
				} else {
					$(".gg-capuse-time").hide();
				}
			} else if (
				deviceTypeId == "19020000" ||
				deviceTypeId == "19030000" ||
				deviceTypeId == "19080000"
			) {
				if ($(this).index() == 0) {
					$(".gg-capuse-time").show();
				} else {
					$(".gg-capuse-time").hide();
				}
			} else if (
				deviceTypeId == "19150000" ||
				deviceTypeId == waterPumpCode
			) {
				if ($(this).index() == 0) {
					$(".gg-capuse-time").show();
				} else {
					$(".gg-capuse-time").hide();
				}
			} else if (deviceTypeId == smokeMonitor) {
				if ($(this).index() == 0) {
					$(".gg-capuse-time").show();
				} else {
					$(".gg-capuse-time").hide();
				}
			}
		});

		//电流与温度
		var gg_ele_btn = $(".gg-ele-btn");
		var gg_tem_btn = $(".gg-tem-btn");
		var gg_liu_btn = $(".gg-liu-btn");
		var gg_ya_btn = $(".gg-ya-btn");
		var capuse_time = $(".gg-capuse-time .gg-capuse-time--item");
		gg_ele_btn.click(function() {
			$(this).css("color", "#3c8dbc");
			$(this).css("borderBottom", "2px solid #3c8dbc");
			$(this)
			.siblings()
			.css("color", "#a5a5a5");
			$(this)
			.siblings()
			.css("borderBottom", "0");
			$(".gg-chart-tem").hide();
			$(".gg-chart-liu").hide();
			$(".gg-chart-ya").hide();
			$(".gg-chart-ele").show();
		});
		gg_tem_btn.click(function() {
			$(this).css("color", "#3c8dbc");
			$(this).css("borderBottom", "2px solid #3c8dbc");
			$(this)
			.siblings()
			.css("color", "#a5a5a5");
			$(this)
			.siblings()
			.css("borderBottom", "0");
			$(".gg-chart-ele").hide();
			$(".gg-chart-liu").hide();
			$(".gg-chart-ya").hide();
			$(".gg-chart-tem").show();
		});
		gg_liu_btn.click(function() {
			$(this).css("color", "#3c8dbc");
			$(this).css("borderBottom", "2px solid #3c8dbc");
			$(this)
			.siblings()
			.css("color", "#a5a5a5");
			$(this)
			.siblings()
			.css("borderBottom", "0");
			$(".gg-chart-ele").hide();
			$(".gg-chart-liu").show();
			$(".gg-chart-ya").hide();
			$(".gg-chart-tem").hide();
		});
		gg_ya_btn.click(function() {
			$(this).css("color", "#3c8dbc");
			$(this).css("borderBottom", "2px solid #3c8dbc");
			$(this)
			.siblings()
			.css("color", "#a5a5a5");
			$(this)
			.siblings()
			.css("borderBottom", "0");
			$(".gg-chart-ele").hide();
			$(".gg-chart-liu").hide();
			$(".gg-chart-ya").show();
			$(".gg-chart-tem").hide();
		});

        // 七天 24小时切换
		capuse_time.click(function() {
			capuse_time.removeClass("is-active");
			$(this).addClass("is-active");

			//查询24小时内 还是 一周内的
			var value = $(this).attr("id");
			//加载设备基本信息
			that.deviceInfoFn(deviceId);
			//加载电流 线缆温度echarts
			that.devicemAFn(deviceId, deviceTypeId, value, data["runState"], "" + data.onlineState);
		});
    },

	// 高警情设备弹框
    heightAlarmDialog(){
        
        var tooltipTemplate = '<div class="floor-main-wrap gg-prtrol-pos"><div class="gg-structure">';

        // if(getGlobalVal('userModel')!=='' && JSON.parse(getGlobalVal('userModel')) === 0){
        //     tooltipTemplate += '<div class="gg-warnNum-dialog gg-prober-pos gg-warnNum-short-dialog heightAlarm-dialog">';
        // }else{
        // }
		tooltipTemplate += '<div class="gg-warnNum-dialog gg-prober-pos gg-warnNum-short-dialog heightAlarm-dialog2">';

        tooltipTemplate += '<div class="gg-prober-header">' +
            '<div class="heightState">' +
            '<span class="heightStateName" id="deviceTitle"></span>' +
            '<span id="heightAlarmState" class="state">真警</span>' +
            '</div>' +
            '<div class="gg-prober-header--info">' +
            '<span class="gg-prober-h5" style="color: #FF0B00;">高度疑似警情</span><a class="gg-online-item"><span id="onlineState"></span></a>' +
            '<a class="gg-prober-location gg-prober-high-alarm"><span class="gg-prober-high-alarm-label">报警时间: </span><span class="gg-prober-high-alarm-content" id="heightAlarmTime" title=""></span></a>'+
            '<a class="gg-prober-location gg-prober-high-alarm"><span class="gg-prober-high-alarm-label">报警位置: </span><span class="gg-prober-high-alarm-content" id="heightAlarmDeviceAddress" title=""></span></a>'+
            '<a class="gg-prober-location gg-prober-high-alarm"><span class="gg-prober-high-alarm-label">报警类型: </span><span class="gg-prober-high-alarm-content" title="">平台报警</span></a>'+
            '<a class="gg-prober-location gg-prober-high-alarm"><span class="gg-prober-high-alarm-label">警情描述: </span><span class="gg-prober-high-alarm-content" title="">本点位与相邻<b id="highAlarm-other-len"></b>点位短时间内密集报警，火警风险较高</span></a>'+'</div>'+
            '</div>';

        tooltipTemplate += '<div class="gg-prober-body">' +
            '<div class="gg-prober-content">' +
            '<div class="gg-switch-content">';
            
        tooltipTemplate += '<div class="gg-btn-capsuleGroup gg-btn-capsuleInline gg-prober-capsule">'+ 
                            '<a class="gg-btn-capsule is-active">相邻点位</a>'+
                            '<a class="gg-btn-capsule">设施信息</a>' +
                            // '<a class="gg-btn-capsule" name="accidRecord">异常记录</a>' +
                            '</div>';
        
        // gg-prober-model tab内容开始
        tooltipTemplate += '<div class="gg-prober-model">';

        tooltipTemplate += '<div class="gg-prober-unit"><!--相邻点位 列表--><ul class="gg-probe-list scroll-normal" id="relationHeightAlarm">'+
        // '<li class="currentFloorDevices">'+
        // '<h3>本层点位:</h3>'+
        // '<div class="HeightAlarmDeviceList"></div></li>'+
        // '<li class="otherFloorDevices">'+
        // '<h3>相邻点位:</h3>'+
        // '<div class="HeightAlarmDeviceList"></div></li>'+
        '</ul></div>'
        // 设施信息列表Html star
        tooltipTemplate += '<div class="gg-prober-unit"><!--设施信息 列表--><div class="gg-prober-device-list">';
        tooltipTemplate += '<div class="gg-prober-device">' +
            '<span class="gg-probe-cell">主机回路点位:</span>' +
            '<span class="gg-probe-cell"><a class="gg-probe-unit-item" id="loop"></a></span>'+
            '</div>' +
            '<div class="gg-prober-device">'+
            '<span class="gg-probe-cell" >设备编号：</span><span class="gg-probe-cell" id="deviceId"></span>'+
            '</div>';
        tooltipTemplate += '<div class="gg-prober-device">' +
            '<span class="gg-probe-cell" >设备品牌：</span>' +
            '<span class="gg-probe-cell" ><a class="gg-probe-unit-item" id="deviceBrand"></a></span></div>';
        tooltipTemplate += '<div class="gg-prober-device">' +
            '<span class="gg-probe-cell" >设备序列号：</span>' +
            '<span class="gg-probe-cell" id="controlHost"></span></div>'
        tooltipTemplate +='</div></div>';
        // 设施信息列表Html end
        // tooltipTemplate += '<div class="gg-prober-unit"><!--异常记录 列表-->' +
        //     '<ul class="gg-probe-list scroll-normal" id="deviceAccident"></ul></div>'
            
        tooltipTemplate += '</div>';
        // gg-prober-model tab内容结束

        tooltipTemplate += '</div></div></div>';

        return tooltipTemplate;

    },

	heightAlarmInfo(currentDevice){
		let that = this;
        var currentDeviceId = currentDevice.deviceId;
        var currentFloor = currentDevice.floorName;
        var heightAlarmDevices = JSON.parse(JSON.stringify(that.heightAlarmDevices));
        for (let i = 0, len=heightAlarmDevices.length; i < len; i++) {
            var item = heightAlarmDevices[i];
            var html = "";
            if(item.deviceId === currentDeviceId){
                var heightState = "";
                switch (item.alarmStatus) {
                    case "0":
                        heightState = "误报"
                        break;
                    case "1":
                        heightState = "真警"
                        break;
                    case "2":
                        heightState = "待核警"
                        break;
                    case "3":
                        heightState = "核警失败"
                        break;
                    case "99":
                        heightState = "失效"
                        break;
                    default:
                        heightState = "未确认"
                        break;
                }
                if(item.alarmStatus === "1")  $("#heightAlarmState").addClass("stateTrue");
                $("#heightAlarmState").text(heightState);
                $("#heightAlarmTime").text(item.createTime);
                $("#heightAlarmDeviceAddress").text(item.concatDeviceAddress);
                $("#highAlarm-other-len").text( (heightAlarmDevices.length-1) + "个")
            }else{
                if(item.floorName === currentFloor){
                    // 与点击点位同层
                    html = '<li class="HeightAlarmDeviceInfo">' +
                    '<div class="AlarmDeviceLocation">报警位置: <span>' + item.concatDeviceAddress + '</span>-<b>[本层]</b></div>' +
                    '<div class="AlarmDeviceTime">报警时间: <span>' + item.createTime + '</span>'
                    if(item.type == "1"){
                        html +=  '<span class="highAlarmType">首报点位</span>' + '</div>'
                    }else{
                        html += '</div>'
                    }
                    if(item.deviceId === currentDeviceId){
                        html += '<button class="showOtherBtn selfDeviceBtn">查 看</button></li>'
                    }else{
                        html += '<button class="showOtherBtn" deviceId='+ item.deviceId + ' floorId='+ item.floorId +'>查 看</button></li>'
                    }
                    $('#relationHeightAlarm').append(html)
                }else{
                    html = '<li class="HeightAlarmDeviceInfo">' +
                    '<div class="AlarmDeviceLocation">报警位置: <span>' + item.concatDeviceAddress + '</span>-<b>[邻层]</b></div>' +
                    '<div class="AlarmDeviceTime">报警时间: <span>' + item.deviceTime + '</span>'
                    if(item.type == "1"){
                        html +=  '<span class="highAlarmType">首报点位</span>' + '</div>'
                    }else{
                        html += '</div>'
                    }
                    html += '<button class="showOtherBtn" deviceId='+ item.deviceId +' floorId='+ item.floorId +'>查 看</button></li>'
                    $('#relationHeightAlarm').append(html)          
                }
            }
        }
    },

    //装置弹出设备
    iot_facility(deviceTypeId, list1, list2) {
      var tooltipTemplate =
        '<div class="floor-main-wrap gg-prtrol-pos"><div class="gg-structure"><!--装置 面板-->';
      switch (deviceTypeId) {
        case hydrantIndoor: //消火栓
        case hydrantOutUp:
        case hydrantOutDown:
        case "01010000": //电气火灾
        case "01020000": //供电末端配电箱
        case "01030000": //末端配电箱切换装置
        case waterTank: //水箱
        case waterPool:
        case waterPump:
        case waterEnd:
        case "19150000": //水位
        case waterPumpCode: //泵
        case "19020000": //室内水压监测
        case "19030000": //室外水压监测
        case "19050000":
        case "19080000": //喷淋末端
        case "19210000": //感烟
        case fireDoor: //防火门
        case "05100000": //水压传感器（非独立式）
        case "05100100": //室内消火栓系统水压传感器（非独立式）
        case "05100200": //室外消火栓系统水压传感器（非独立式）
        case "05100300": //自动喷水灭火系统水压传感器（非独立式）
        case "05110000": //水位传感器（非独立式）
          tooltipTemplate +=
            '<div class="gg-warnNum-dialog gg-prober-pos gg-warnNum-long-dialog">';
          break;
        default:
          tooltipTemplate +=
            '<div class="gg-warnNum-dialog gg-prober-pos gg-warnNum-short-dialog">';
          break;
      }

      tooltipTemplate += `<div class="gg-prober-header clearfix">
                                        <div class="gg-prober-header--info">
                                            <span class="gg-prober-h5" id="deviceTitle"></span>
                                            <a class="gg-online-item"><span id="onlineState"></span></a>
                                            <a class="gg-prober-location" id="deviceTitle1" title=""></a>
                                        </div>
                                    </div>
                                    <div class="gg-prober-body">
                                        <div class="gg-prober-content">
                                            <div class="gg-switch-content">`;
      //设备类型电气火灾监控装置 显示 实时电流电温
      //设备类型 室内水压监测装置  室外水压加测装置 显示实时水压
      var tooltipTemplate_capsule = "";
      var tooltipTemplate_unit = "";

      //兼容旧设备类型弹框默认样式
      var other_capsule = '<a class="gg-btn-capsule">设施信息</a>',
        other_capsule_div = '<div class="gg-prober-unit">';

      switch (deviceTypeId) {
        case "19020000": //室内消火栓水压监测装置  室外
        case "19030000": //室外消火栓水压监测装置  室内
        case "05100000": //水压传感器（非独立式）
        case "05100100": //室内消火栓系统水压传感器（非独立式）
        case "05100200": //室外消火栓系统水压传感器（非独立式）
        case "05100300": //自动喷水灭火系统水压传感器（非独立式）
        case "19080000": //喷淋末端自动试水装置   末端
          tooltipTemplate +=
            '<div class="gg-prober-group"><a class="gg-normal-item"><span id="currentMpa">--</span>MPa</a></div>';
          tooltipTemplate_capsule =
            '<a class="gg-btn-capsule is-active" name="mpa">水压曲线</a>';
          tooltipTemplate_unit =
            '<div class="gg-prober-unit"><!--水压 折线图--><div class="gg-probe-chart" id="deviceWater"></div></div>';
          break;
        //配电箱
        case "19050000": //电气火灾监控装置
          tooltipTemplate +=
            '<div class="gg-prober-group"><a class="gg-normal-item"><span id="currentState">正常</span></a></div>';
          tooltipTemplate_capsule =
            '<a class="gg-btn-capsule is-active">实时读数</a><a class="gg-btn-capsule" name="ma">监测曲线</a>';
          tooltipTemplate_unit = `<div class="gg-prober-unit">
                                <div class="gg-prober-unit__table">
                                    <table><thead><th width="50%">对象</th><th width="50%">实时值</th></thead></table>
                                </div>
                                <div class="gg-scroll-tbody scroll-normal"><table><tbody id="curData"></tbody></table></div>
                                </div>
                                <div class="gg-prober-unit">
                                    <div class="gg-probe-chart">
                                        <div class="gg-probe-chart__btn">
                                            <a class="gg-ele-btn">剩余电流</a>
                                            <a class="gg-tem-btn">线缆温度</a>
                                            <a class="gg-liu-btn">相电流</a>
                                            <a class="gg-ya-btn">相电压</a>
                                        </div><!--剩余电流 折线图-->
                                    <div class="gg-chart-ele" id="deviceMa"></div>
                                    <div class="gg-chart-tem" id="deviceTem"></div>
                                    <div class="gg-chart-liu" id="deviceLiu"></div>
                                    <div class="gg-chart-ya" id="deviceYa"></div>
                                </div></div>`;
          break;
        case "19150000": //水位传感器  消防水池水箱
        case "19180000": //消防泵启停监测装置  消防泵
        case "05110000": //水位传感器（非独立式）
          tooltipTemplate +=
            '<div class="gg-prober-group"><a class="gg-normal-item"><span id="currentM">--</span>m</a></div>';
          tooltipTemplate_capsule =
            '<a class="gg-btn-capsule is-active" name="m">水位曲线</a>';
          tooltipTemplate_unit =
            '<div class="gg-prober-unit"><!--水位 折线图--><div class="gg-probe-chart" id="deviceWaterLevel"></div></div>';
          break;
        default:
          tooltipTemplate +=
            '<div class="gg-prober-group"><a class="gg-normal-item"><span id="currentState">正常</span></a></div>';
          other_capsule = '<a class="gg-btn-capsule is-active">设施信息</a>';
          other_capsule_div =
            '<div class="gg-prober-unit" style="display: block;">';
          break;
      }

      //面板胶囊按钮
      tooltipTemplate +=
        '<div class="gg-btn-capsuleGroup gg-btn-capsuleInline gg-prober-capsule">' +
        tooltipTemplate_capsule;

      tooltipTemplate +=
        other_capsule +
        '<a class="gg-btn-capsule" name="accidRecord">异常记录</a></div>';

      if (deviceTypeId !== "19120000") {
        tooltipTemplate += `<div class="gg-capuse-time">
                                            <a class="gg-capuse-time--item is-active" id="7">近一周</a>
                                            <a class="gg-capuse-time--item"  id="24">24小时</a>
                                        </div>`;
      }
      tooltipTemplate += "</div>";
      tooltipTemplate +=
        '<div class="gg-prober-model">' +
        tooltipTemplate_unit +
        other_capsule_div +
        '<div class="gg-prober-device-list">';
      tooltipTemplate += `<div class="gg-prober-device">
                                        <span class="gg-probe-cell">主机回路点位：</span>
                                        <span class="gg-probe-cell"><a class="gg-probe-unit-item" id="loop"></a></span>
                                    </div>
                                    <div class="gg-prober-device"><span class="gg-probe-cell" >设备ID：</span><span class="gg-probe-cell" id="deviceId"></span></div>
                                    <div class="gg-prober-device">
                                        <span class="gg-probe-cell">设施品牌：</span>
                                        <span class="gg-probe-cell" ><a class="gg-probe-unit-item" id="deviceBrand"></a></span>
                                    </div>
                                    <div class="gg-prober-device">
                                        <span class="gg-probe-cell" >ID/SN/序列号：</span>
                                        <span class="gg-probe-cell" id="controlHost"></span>
                                    </div></div></div>
                                    <div class="gg-prober-unit"><!--异常记录 列表-->
                                        <ul class="gg-probe-list scroll-normal" id="deviceAccident"></ul>
                                    </div></div></div></div></div>`;
      if (list1 !== "" || list2 !== "") {
        tooltipTemplate +=
          '<div class="toggle-warnNum-dialog">消防设施<span class="ggicon-back"></span></div>';
      }

      //装置拼接
      tooltipTemplate += `<div class="gg-warnNum-long-dialog add-prober-pos add-warnNum-dialog">
                        <ul id="add_deviceUnit" class="add_deviceUnit"></ul>
                        <div class="add-prober-header">
                            <div class="gg-prober-header--info">
                                <span class="gg-prober-h5" id="add_deviceTitle">暂无设备</span>
                                <a class="gg-online-item"><span id="add_onlineState"></span></a>
                                <a class="gg-prober-location"><span id="add_deviceTitle1" title="" class="add-device-info">找不到设备</span></a>
                            </div>
                            <div class="gg-prober-group"><a class="gg-prober-group-alert"><span id="currentState_alert">正常</span></a></div>
                        </div>
                        <div class="add-prober-body">
                        <div class="gg-prober-content">
                        <div class="gg-switch-content">
                            <div class="gg-btn-capsuleGroup gg-btn-capsuleInline gg-prober-capsule">
                                <a class="add-btn-capsule add-is-active">设施信息</a>
                                <a class="add-btn-capsule" name="accidRecord">异常记录</a></div>
                            </div>
                        <div class="gg-prober-model">
                        <div class="add-prober-unit" style="display: block;"><!--设施信息 列表-->
                        <div class="gg-prober-device-list">
                        <div class="gg-prober-device"><span class="gg-probe-cell">设备ID：</span><span class="gg-probe-cell add-device-info" id="add_deviceId"></span></div>
                        <div class="gg-prober-device"><span class="gg-probe-cell">设施品牌：</span><span class="gg-probe-cell add-device-info" id="add_deviceBrand"></span></div>
                        <div class="gg-prober-device"><span class="gg-probe-cell">ID/SN/序列号：</span><span class="gg-probe-cell add-device-info" id="add_controlHost"></span></div>
                        </div></div>
                        <div class="add-prober-unit"><!--异常记录 列表--><ul class="gg-probe-list scroll-normal" id="add_deviceAccident"></ul></div></div></div></div>
                        </div></div>
                    </div>`;
      return tooltipTemplate;
    },

    //物联网设备弹出装置
    iot_device(deviceTypeId, list1, list2) {
      var tooltipTemplate =
        '<div class="floor-main-wrap gg-prtrol-pos"><div class="gg-structure">';
      var other_template = "";
      switch (deviceTypeId) {
        case "01010000":
        case waterTank:
        case waterEnd:
        case waterPool:
        case waterPump:
        case "19150000": //水位
        case waterPumpCode: //泵
        case hydrantIndoor:
        case hydrantOutUp:
        case hydrantOutDown:
        case "19050000":
        case "19020000": //室内水压监测
        case "19030000": //室外水压监测
        case smokeMonitor:
        case "19080000": //喷淋末端
        case "01020000": //供电末端配电箱
        case "01030000": //末端配电箱切换装置
          tooltipTemplate +=
            '<div class="gg-warnNum-dialog gg-prober-pos gg-warnNum-long-dialog">';
          other_template =
            '<div class="gg-warnNum-long-dialog add-prober-pos add-warnNum-dialog">';
          break;
        default:
          tooltipTemplate +=
            '<div class="gg-warnNum-dialog gg-prober-pos gg-warnNum-short-dialog">';
          other_template =
            '<div class="gg-warnNum-short-dialog add-prober-pos add-warnNum-dialog">';
          break;
      }
      let isRoad = "";
      switch (deviceTypeId) {
        case "03010100":
        case "03010200":
        case "03010300":
        case "03010400":
        case "03010500":
        case "03010600":
        case "03020000":
          // isRoad
          isRoad = "主机回路点位通道: ";
          break;
        default:
          // isRoad
          isRoad = "主机回路点位: ";
          break;
      }
      tooltipTemplate += `<div class="gg-prober-header clearfix">
                                        <div class="gg-prober-header--info">
                                            <span class="gg-prober-h5" id="deviceTitle"></span>
                                            <a class="gg-online-item"><span id="onlineState"></span></a>
                                            <a class="gg-prober-location" id="deviceTitle1" title=""></a>
                                        </div>
                                    </div>
                                    <div class="gg-prober-group"><a class="gg-normal-item"><span id="currentState">正常</span></a></div>
                                    <div class="gg-prober-body">
                                        <div class="gg-prober-content">
                                            <div class="gg-switch-content">
                                                <div class="gg-btn-capsuleGroup gg-btn-capsuleInline gg-prober-capsule">
                                                    <a class="gg-btn-capsule is-active">设施信息</a>
                                                    <a class="gg-btn-capsule" name="accidRecord">异常记录</a>
                                                </div>
                                                <div class="gg-prober-model">
                                                    <div class="gg-prober-unit"><!--设施信息 列表-->
                                                        <div class="gg-prober-device-list">
                                                            <div class="gg-prober-device">
                                                                <span class="gg-probe-cell">` + isRoad + `</span>
                                                                <span class="gg-probe-cell"><a class="gg-probe-unit-item" id="loop"></a></span>
                                                            </div>
                                                            <div class="gg-prober-device"><span class="gg-probe-cell" >设备ID：</span><span class="gg-probe-cell" id="deviceId"></span></div>
                                                            <div class="gg-prober-device">
                                                                <span class="gg-probe-cell" >设施品牌：</span>
                                                                <span class="gg-probe-cell" ><a class="gg-probe-unit-item" id="deviceBrand"></a></span>
                                                            </div>
                                                            <div class="gg-prober-device">
                                                                <span class="gg-probe-cell" >ID/SN/序列号：</span>
                                                                <span class="gg-probe-cell" id="controlHost"></span>
                                                            </div></div></div>
                                                            <div class="gg-prober-unit"><!--异常记录 列表-->
                                                                <ul class="gg-probe-list scroll-normal" id="deviceAccident"></ul>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>`;
      if (list1 !== "" || list2 !== "") {
        // isList
        tooltipTemplate += '<div class="toggle-warnNum-dialog">监测装置<span class="ggicon-back"></span></div>';
      }

      tooltipTemplate +='</div>'+
        other_template +
        `<ul id="add_deviceUnit" class="add_deviceUnit"></ul>
                    <div class="add-prober-header">
                    <div class="gg-prober-header--info"><span class="gg-prober-h5" id="add_deviceTitle">暂无装置</span>
                    <a class="gg-online-item"><span id="add_onlineState"></span></a>
                    <a class="gg-prober-location"><span id="add_deviceTitle1" title="" class="add-device-info">找不到装置</span></a></div></div>
                    <div class="add-prober-body">
                    <div class="gg-prober-content">
                    <div class="gg-switch-content">`;

      var tooltipTemplate_capsule = "";
      var tooltipTemplate_unit = "";

      //兼容旧设备类型弹框默认样式
      var other_capsule = '<a class="add-btn-capsule">设施信息</a>',
        other_capsule_div = '<div class="add-prober-unit">';

      switch (deviceTypeId) {
        case hydrantIndoor: //消火栓
        case hydrantOutUp:
        case hydrantOutDown:
        case "19020000":
        case "19030000":
        case waterEnd:
        case "19080000": //喷淋末端
          // moDuan
          tooltipTemplate +=
            '<div class="gg-prober-group"><a class="gg-prober-group-alert"><span id="currentMpa_alert">--</span>MPa</a></div>';
          tooltipTemplate_capsule =
            '<a class="add-btn-capsule add-is-active" name="mpa">水压曲线</a>';
          tooltipTemplate_unit =
            '<div class="add-prober-unit" style="display: block;"><div class="add-capuse-time"><a class="gg-capuse-time--item is-active" id="7">7天</a><a class="gg-capuse-time--item" id="24">24小时</a></div><!--水压 折线图--><div class="gg-probe-chart" id="deviceWater"></div></div>';
          break;
        case "01010000": //电气火灾
        case "19050000":
        case waterPumpCode: //泵
        case "01020000": //供电末端配电箱
        case "01030000": //末端配电箱切换装置
          // dianQi
          tooltipTemplate +=
            '<div class="gg-prober-group"><a class="gg-prober-group-alert"><span id="currentState_alert">正常</span></a></div>';
          tooltipTemplate_capsule =
            '<a class="add-btn-capsule add-is-active">实时读数</a><a class="add-btn-capsule" name="ma">监测曲线</a>';
          tooltipTemplate_unit = `<div class="add-prober-unit" style="display: block;">
                                <div class="gg-prober-unit__table">
                                    <table><thead><th width="50%">对象</th><th width="50%">实时值</th></thead></table>
                                </div>
                                <div class="gg-scroll-tbody scroll-normal">
                                    <table><tbody id="curData"></tbody></table>
                                </div>
                            </div>
                            <div class="add-prober-unit">
                                <div class="add-capuse-time">
                                    <a class="gg-capuse-time--item is-active" id="7">近一周</a>
                                    <a class="gg-capuse-time--item"  id="24">24小时</a>
                                </div>
                                <div class="gg-probe-chart">
                                    <div class="gg-probe-chart__btn">
                                        <a class="gg-ele-btn">剩余电流</a>
                                        <a class="gg-tem-btn">线缆温度</a>
                                        <a class="gg-liu-btn">相电流</a>
                                        <a class="gg-ya-btn">相电压</a>
                                    </div><!--剩余电流 折线图-->
                                    <div class="gg-chart-ele" id="deviceMa"></div>
                                    <div class="gg-chart-tem" id="deviceTem"></div>
                                    <div class="gg-chart-liu" id="deviceLiu"></div>
                                    <div class="gg-chart-ya" id="deviceYa"></div>
                                </div>
                            </div>`;
          break;
        case waterTank: //水箱
        case waterPool:
        case waterPump:
        case "19150000":
          // waters
          tooltipTemplate +=
            '<div class="gg-prober-group"><a class="gg-prober-group-alert"><span id="currentM_alert">--</span>m</a></div>';
          tooltipTemplate_capsule =
            '<a class="add-btn-capsule add-is-active" name="m">水位曲线</a>';
          tooltipTemplate_unit =
            '<div class="add-prober-unit" style="display: block;"><div class="add-capuse-time"><a class="gg-capuse-time--item is-active" id="7">近一周</a><a class="gg-capuse-time--item"  id="24">24小时</a></div><!--水位 折线图--><div class="gg-probe-chart" id="deviceWaterLevel"></div></div>';
          break;
        default:
          // others
          tooltipTemplate +=
            '<div class="gg-prober-group"><a class="gg-prober-group-alert"><span id="currentState_alert">正常</span></a></div>';
          other_capsule =
            '<a class="add-btn-capsule add-is-active">设施信息</a>';
          other_capsule_div =
            '<div class="add-prober-unit" style="display: block;">';
          break;
      }

      tooltipTemplate += '<div class="gg-btn-capsuleGroup gg-btn-capsuleInline gg-prober-capsule">' + tooltipTemplate_capsule + other_capsule +
        '<a class="add-btn-capsule" name="accidRecord">异常记录</a></div></div>' +
        '<div class="gg-prober-model">' +
        tooltipTemplate_unit +
        other_capsule_div +
        `<div class="gg-prober-device-list">
                        <div class="gg-prober-device"><span class="gg-probe-cell">设备ID：</span><span class="gg-probe-cell add-device-info" id="add_deviceId"></span></div>
                        <div class="gg-prober-device"><span class="gg-probe-cell">设施品牌：</span><span class="gg-probe-cell add-device-info" id="add_deviceBrand"></span></div>
                        <div class="gg-prober-device"><span class="gg-probe-cell">ID/SN/序列号：</span><span class="gg-probe-cell add-device-info" id="add_controlHost"></span></div>
                    </div></div>
                    <div class="add-prober-unit"><!--异常记录 列表--><ul class="gg-probe-list scroll-normal" id="add_deviceAccident"></ul></div></div></div></div>
                    </div></div>
                    </div>`;
      return tooltipTemplate;
    },

    // 查询设备的基本信息
    deviceInfoFn(deviceId) {
      let that = this;
      $Service
        .getMoniterDevice(this, { unitId: this.unitId, deviceId: deviceId })
        .then(res => {
          if (res.code === "success") {
            let data = res.data;
            var brand = data.brand == null ? "" : data.brand; //品牌
            var model = data.model == null ? "" : data.model; //型号
            var vender =
              data.vender == null || data.vender == "null" ? "" : data.vender; //厂商
            var deviceTypeName =
              data.deviceTypeName == null ? "" : data.deviceTypeName;
            var deviceId = data.deviceId == null ? "" : data.deviceId;
            that.MonitoringObject = data.monitoringObject;

            var buildName = data.buildName == null ? "" : data.buildName; //楼栋名称
            var floorName = data.floorName == null ? "" : data.floorName; //楼层名称
            var deviceAddress =
              data.deviceAddress == null ? "" : data.deviceAddress; //具体地址
            var laLoop = data.laLoop == null ? "" : data.laLoop; //回路
            var laPoint = data.laPoint == null ? "" : data.laPoint; //点位
            var controlHost = data.controlHost == null ? "" : data.controlHost; //ID/SN/序列号
            var cardNo = data.cardno == null ? "" : data.cardno; //nb卡号
            var module = data.module == null ? "" : data.module; //模组
            var installDate = data.installDate == null ? "" : data.installDate; //安装日期
            var onlineState =
              "" + data.onlineState == "1"
                ? "在线"
                : "" + data.onlineState == "0"
                ? "离线"
                : "未接入"; //设备是否在线 1 在线 0  离线
            var deviceTypeId = data.deviceTypeId; //设备类型id

            $("#deviceId").html(deviceId);
            $("#deviceBrand").html(brand + model || "--");
            $("#deviceTypeName").html(deviceTypeName + deviceId);
            $("#deviceInfo").html(vender + brand + model || "--");
            $("#controlHost").html(controlHost || "--");
            $("#deviceTitle").html(deviceTypeName);
            $("#deviceModule").html(module || "--");
            $("#deviceNB").html(cardNo || "--");
            $("#installDate").html(installDate || "--");

            var title1 = "";
            if (data.isCTerminal === 1) {
              title1 = (data.homeAddress || "") + deviceAddress;
            } else {
              title1 = buildName + floorName + deviceAddress;
            }
            $("#deviceTitle1").html(title1);
            $("#deviceTitle1").attr("title", title1);

            switch (deviceTypeId) {
              case "19010000":
              case "19020000":
              case "19030000":
              case "19050000":
              case "19080000":
              case "19120000":
              case "19150000":
              case "19210000":
              case "19220000":
              case "19230000":
                if (onlineState == "离线" || onlineState == "未接入") {
                  $("#onlineState")
                    .parent()
                    .removeClass("gg-online-item")
                    .addClass("gg-outline-item");
                  $(".gg-prober-body .gg-prober-group").hide();
                }
                $("#onlineState").html(onlineState); //设备在线状态
                break;
            }

            switch (deviceTypeId) {
              case "03010100":
              case "03010200":
              case "03010300":
              case "03010400":
              case "03010500":
              case "03010600":
              case "03020000":
                $("#loop").html(
                  (data.laMake == null ? "" : data.laMake) +
                    "-" +
                    (laLoop == null ? "" : laLoop) +
                    "-" +
                    (laPoint == null ? "" : laPoint) +
                    "-" +
                    data.channelNum
                );
                break;
              default:
                $("#loop").html(
                  (data.laMake == null ? "" : data.laMake) +
                    "-" +
                    (laLoop == null ? "" : laLoop) +
                    "-" +
                    (laPoint == null ? "" : laPoint)
                );
                break;
            }
          }
        });
    },

    // 设备的故障列表
    deviceAccidentInfo(deviceId) {
      $Service
        .getExceptionRecord(this, { unitId: this.unitId, deviceId: deviceId })
        .then(res => {
          if (res.code === "success" && res.data.length > 0) {
            var html = "";
            var abnormalData = res.data;
            for (var i = 0; i < abnormalData.length; i++) {
              // 根据deviceTypeId判断是否显示异常值，后端暂未构建
              switch (abnormalData[i].deviceTypeId) {
                case "03010100":
                case "03010200":
                case "03010300":
                case "03010400":
                case "03010500":
                case "03010600":
                  html +=
                    '<li class="abli"><span class="abli-text">' +
                    (abnormalData[i].faultDescribe || "--") +
                    (abnormalData[i].warningValue == null ? "" : ",") +
                    "<span>" +
                    (abnormalData[i].warningValue == null
                      ? ""
                      : abnormalData[i].warningValue) +
                    '</span></span><span class="abli-date">' +
                    (abnormalData[i].deviceTime
                      ? abnormalData[i].deviceTime
                      : "--") +
                    "</span></li>";
                  break;
                default:
                  html +=
                    '<li class="abli"><span class="abli-text">' +
                    (abnormalData[i].faultDescribe || "--") +
                    '</span><span class="abli-date">' +
                    (abnormalData[i].deviceTime
                      ? abnormalData[i].deviceTime
                      : "--") +
                    "</span></li>";
                  break;
              }
            }
            $("#deviceAccident").html(html);
            $(".abli-text span").css("color", "red");
          } else {
            $("#deviceAccident").html("暂无数据");
          }
        });
    },

    devicemAFn(deviceId, deviceTypeId, value, runState, onlineState) {
      let that = this;
      //先查询 当前设备 最新的报警 或者隐患 获取时间 用于查询 异常记录（监测中心数据量大，用时间限制查询范围）
      var data = null;
      $Service
        .getMonitorNotesByTime(this, {
          unitId: this.unitId,
          deviceId: deviceId,
          flag: value
        })
        .then(res => {
            let $html = '<span style="font-size: 1.2rem">暂无数据</span>';
          if (res.code !== "success" || Object.keys(res.data).length == 0) {
            switch (deviceTypeId) {
              case "19050000":
              case "01010000":
              case "01020000":
              case "01030000":
                //设备类型 电气火灾监控装置 显示电流曲线 电温曲线
                $("#deviceMa").html($html);
                $("#deviceTem").html($html);
                $("#deviceLiu").html($html);
                $("#deviceYa").html($html);
                break;
              case "19020000": //室内水压监测
              case "19030000": //室外水压监测
              case hydrantIndoor:
              case hydrantOutUp:
              case hydrantOutDown:
              case waterEnd:
              case "05100000":
              case "05100100":
              case "05100200":
              case "05100300":
              case "19080000": //喷淋末端
                //设备类型 室内水压监测装置  室外水压加测装置 喷淋末端 显示水压曲线
                $("#deviceWater").html($html);
                break;
              case "19150000": //水位
              case waterPumpCode: //泵
              case waterPool:
              case waterPump:
              case waterTank:
              case "05110000":
                //水位
                $("#deviceWaterLevel").html($html);
                break;
            }
            return;
          }
          data = res.data;

          var currentMpa = 0; //当前水压
          var currentM = 0; //当前水位
          var currentV = ""; //电池电压
          if (data != null) {
            if (data.yValue != null && data.yValue.length > 0) {
              currentMpa = data.yValue[data.yValue.length - 1];
              currentMpa = currentMpa == null ? 0 : currentMpa
              $("#currentMpa_alert").html(currentMpa);
            }
            if (data.batteryValue != null && data.batteryValue.length > 0) {
              currentV = data.batteryValue[data.batteryValue.length - 1];
            }
            if (
              data.waterLevelValue != null &&
              data.waterLevelValue.length > 0
            ) {
              currentM = data.waterLevelValue[data.waterLevelValue.length - 1];
            }
          }
          if (
            deviceTypeId == "19020000" ||
            deviceTypeId == "19030000" ||
            deviceTypeId == hydrantIndoor ||
            deviceTypeId == hydrantOutUp ||
            deviceTypeId == hydrantOutDown
          ) {
            if (onlineState === "1") {
                var stateType = "normal";
                switch (runState) {
                    case "1":
                        stateType = "alarm";
                    break;
                    case "2":
                    case "96":
                    case "97":
                        stateType = "prober";
                    break;
                    case "5":
                        stateType = "abnormal";
                    break;
                    case "98":
                        stateType = "warning";
                    break;
                }
                $("#currentMpa").parent().removeClass().addClass("gg-"+stateType+"-item");
            } else {
              $("#currentMpa").parent().removeClass();
            }
          } else if (
            deviceTypeId == "19150000" ||
            deviceTypeId == waterPumpCode ||
            deviceTypeId == "19080000" ||
            deviceTypeId == hydrantIndoor ||
            deviceTypeId == hydrantOutUp ||
            deviceTypeId == hydrantOutDown
          ) {
            if (onlineState === "1") {
              switch (runState) {
                case "1":
                  $("#currentM")
                    .parent()
                    .removeClass()
                    .addClass("gg-alarm-item");
                  break;
                case "2":
                  $("#currentM")
                    .parent()
                    .removeClass()
                    .addClass("gg-prober-item");
                  break;
                case "5":
                  $("#currentM")
                    .parent()
                    .removeClass()
                    .addClass("gg-abnormal-item");
                  break;
                case "96":
                  $("#currentM")
                    .parent()
                    .removeClass()
                    .addClass("gg-prober-item");
                  break;
                case "97":
                  $("#currentM")
                    .parent()
                    .removeClass()
                    .addClass("gg-prober-item");
                  break;
                case "98":
                  $("#currentM")
                    .parent()
                    .removeClass()
                    .addClass("gg-warning-item");
                  break;
              }
            } else {
              $("#currentM")
                .parent()
                .removeClass();
            }
          }

          //当前的电流 温度  水压值回显
          $("#currentMpa").html(currentMpa);
          $("#powersupplyVoltage").html(currentV == null ? "" : currentV);
          $("#currentM").html(currentM == null ? "" : currentM);
          // 线缆温度
          var zheXianContent = {
            containerId: "deviceTem",
            option: {
              title: {
                text: ""
              },
              tooltip: {
                trigger: "axis",
                formatter: function(params) {
                  var relVal = params[0].name;
                  for (var i = 0, l = params.length; i < l; i++) {
                    relVal +=
                      "<br/>" +
                      params[i].seriesName +
                      " : " +
                      params[i].value + "℃";
                  }
                  return relVal;
                },
                axisPointer: {
                  type: "cross",
                  label: {
                    backgroundColor: "#6a7985"
                  }
                }
              },
              legend: {
                data: ["A相温度", "B相温度", "C相温度", "N相温度"],
                textStyle: {
                  color: "#ffffff"
                }
              },
              toolbox: {},
              grid: {
                top: "15%",
                left: "4%",
                right: "10%",
                bottom: "3%",
                containLabel: true
              },
              xAxis: [
                {
                  type: "category",
                  boundaryGap: false,
                  data: data.xValue.map(function(str) {
                    return str.replace(" ", "\n");
                  }),
                  axisLabel: {
                    textStyle: {
                      fontSize: 14,
                      color: "#fff"
                    }
                  }
                }
              ],
              yAxis: [
                {
                  type: "value",
                  axisLabel: {
                    margin: 10,
                    textStyle: {
                      fontSize: 14,
                      color: "#fff"
                    }
                  },
                  axisLine: {
                    show: false
                  },
                  axisTick: {
                    show: false
                  }
                }
              ],
              series: [
                {
                  name: "A相温度",
                  type: "line",
                  smooth: true,
                  areaStyle: { normal: { width: 1 } },
                  data: data.yaValue
                },
                {
                  name: "B相温度",
                  type: "line",
                  smooth: true,
                  areaStyle: { normal: { width: 1 } },
                  data: data.ybValue
                },
                {
                  name: "C相温度",
                  type: "line",
                  smooth: true,
                  areaStyle: { normal: { width: 1 } },
                  data: data.ycValue
                },
                {
                  name: "N相温度",
                  type: "line",
                  smooth: true,
                  areaStyle: { normal: { width: 1 } },
                  data: data.ydValue
                }
              ]
            }
          };
          // 剩余电流
          var mAContent = {
            containerId: "deviceMa",
            option: {
              title: {
                text: ""
              },
              tooltip: {
                trigger: "axis",
                formatter: function(params) {
                  var relVal = params[0].name;
                  for (var i = 0, l = params.length; i < l; i++) {
                    relVal +=
                      "<br/>" +
                      params[i].seriesName +
                      " : " +
                      params[i].value +
                      "mA";
                  }
                  return relVal;
                },
                axisPointer: {
                  type: "cross",
                  label: {
                    backgroundColor: "#6a7985"
                  }
                }
              },
              legend: {
                data: ["剩余电流"],
                textStyle: {
                  color: "#ffffff"
                }
              },
              toolbox: {},
              grid: {
                top: "15%",
                left: "2%",
                right: "10%",
                bottom: "3%",
                containLabel: true
              },
              xAxis: [
                {
                  type: "category",
                  boundaryGap: false,
                  data: data.xValue.map(function(str) {
                    return str.replace(" ", "\n");
                  }),
                  axisLabel: {
                    textStyle: {
                      fontSize: 14,
                      color: "#fff"
                    }
                  }
                }
              ],
              yAxis: [
                {
                  type: "value",
                  axisLabel: {
                    margin: 10,
                    textStyle: {
                      fontSize: 14,
                      color: "#fff"
                    }
                  },
                  axisLine: {
                    show: false
                  },
                  axisTick: {
                    show: false
                  }
                }
              ],
              series: [
                {
                  name: "剩余电流",
                  type: "line",
                  data: data.ymaValue,
                  smooth: true,
                  itemStyle: { normal: { color: "#a8f8fd" } },
                  areaStyle: { normal: { color: "#add8f7" } },
                  lineStyle: { normal: { color: "#4baaee", width: 1 } }
                }
              ]
            }
          };
          var mpaContent = {
            containerId: "deviceWater",
            option: {
              title: {
                text: ""
              },
              color: ["#add8f7"],
              tooltip: {
                trigger: "axis",
                axisPointer: {
                  type: "cross",
                  label: {
                    backgroundColor: "#6a7985"
                  }
                }
              },
              legend: {
                data: ["水压"],
                textStyle: {
                  color: "#ffffff"
                }
              },
              grid: {
                top: "20%",
                left: "7%",
                right: "7%",
                bottom: "20",
                containLabel: true
              },
              xAxis: [
                {
                  nameLocation: "middle",
                  type: "category",
                  boundaryGap: false,
                  data: data.xValue,
                  axisLabel: {
                    margin: 10,
                    textStyle: {
                      fontSize: 12,
                      color: "#fff"
                    }
                  },
                  axisTick: {
                    show: false
                  },
                  axisLine: {
                    show: false
                  }
                }
              ],
              yAxis: [
                {
                  name: " 单位/MPa",
                  nameTextStyle: {
                    color: "#fff"
                  },
                  nameLocation: "end",
                  type: "value",
                  axisLabel: {
                    margin: 10,
                    textStyle: {
                      fontSize: 14,
                      color: "#fff"
                    }
                  },
                  axisTick: {
                    show: false
                  },
                  axisLine: {
                    show: false
                  }
                }
              ],
              series: [
                {
                  name: "水压",
                  type: "line",
                  areaStyle: { normal: {} },
                  data: data.yValue,
                  smooth: true,
                  lineStyle: {
                    normal: {
                      color: "#4baaee",
                      width: 1
                    }
                  },
                  areaStyle: {
                    normal: {
                        color: 'rgba(0, 182, 253, 0.6)',
                    }
                  }
                }
              ],
              dataZoom: [
                {
                  type: "slider",
                  show: true, //flase直接隐藏图形
                  textStyle: {
                    color: "#fff"
                  },
                  xAxisIndex: [0],
                  left: "15%", //滚动条靠左侧的百分比
                  bottom: "5",
                  height: 12,
                  width: 280,
                  start: 50, //滚动条的起始位置
                  end: 100 //滚动条的截止位置（按比例分割你的柱状图x轴长度）
                }
              ]
            }
          };
          var waterLevelContent = {
            containerId: "deviceWaterLevel",
            option: {
              title: {
                text: ""
              },
              color: ["#4baaee"],
              tooltip: {
                trigger: "axis",
                axisPointer: {
                  type: "cross",
                  label: {
                    backgroundColor: "black"
                  }
                }
              },
              legend: {
                data: ["水位"],
                textStyle: {
                  color: "#ffffff"
                }
              },
              grid: {
                top: "25%",
                left: "8%",
                right: "4%",
                bottom: "3%",
                containLabel: true
              },
              xAxis: [
                {
                  type: "category",
                  boundaryGap: false,
                  data: data.xValue,
                  axisLabel: {
                    margin: 10,
                    textStyle: {
                      fontSize: 14,
                      color: "#fff"
                    }
                  },
                  axisLine: {
                    show: false
                  }
                }
              ],
              yAxis: [
                {
                  name: " 单位/m",
                  type: "value",
                  axisLabel: {
                    margin: 10,
                    textStyle: {
                      fontSize: 14,
                      color: "#fff"
                    }
                  },
                  axisLine: {
                    show: false
                  }
                }
              ],
              series: [
                {
                  name: "水位",
                  smooth: true,
                  type: "line",
                  itemStyle: { normal: { color: "#a8f8fd" } },
                  areaStyle: { normal: { color: "#add8f7" } },
                  lineStyle: { normal: { color: "#4baaee", width: 1 } },
                  data: data.waterLevelValue
                }
              ]
            }
          };
          //相电流
          var liuContent = {
            containerId: "deviceLiu",
            option: {
              title: {
                text: ""
              },
              tooltip: {
                trigger: "axis",
                formatter: function(params) {
                  var relVal = params[0].name;
                  for (var i = 0, l = params.length; i < l; i++) {
                    relVal +=
                      "<br/>" +
                      params[i].seriesName +
                      " : " +
                      params[i].value +
                      "A";
                  }
                  return relVal;
                },
                axisPointer: {
                  type: "cross",
                  label: {
                    backgroundColor: "#6a7985"
                  }
                }
              },
              legend: {
                data: ["A相电流", "B相电流", "C相电流"],
                textStyle: {
                  color: "#ffffff"
                }
              },
              toolbox: {},
              grid: {
                top: "15%",
                left: "4%",
                right: "10%",
                bottom: "3%",
                containLabel: true
              },
              xAxis: [
                {
                  type: "category",
                  boundaryGap: false,
                  data: data.xValue.map(function(str) {
                    return str.replace(" ", "\n");
                  }),
                  axisLabel: {
                    textStyle: {
                      fontSize: 14,
                      color: "#fff"
                    }
                  }
                }
              ],
              yAxis: [
                {
                  type: "value",
                  axisLabel: {
                    margin: 10,
                    textStyle: {
                      fontSize: 14,
                      color: "#fff"
                    }
                  },
                  axisLine: {
                    show: false
                  },
                  axisTick: {
                    show: false
                  }
                }
              ],
              series: [
                {
                  name: "A相电流",
                  type: "line",
                  smooth: true,
                  areaStyle: { normal: { width: 1 } },
                  data: data.yAma
                },
                {
                  name: "B相电流",
                  type: "line",
                  smooth: true,
                  areaStyle: { normal: { width: 1 } },
                  data: data.yBma
                },
                {
                  name: "C相电流",
                  type: "line",
                  smooth: true,
                  areaStyle: { normal: { width: 1 } },
                  data: data.yCma
                }
              ]
            }
          };
          // 相电压
          var yaContent = {
            containerId: "deviceYa",
            option: {
              title: {
                text: ""
              },
              tooltip: {
                trigger: "axis",
                formatter: function(params) {
                  var relVal = params[0].name;
                  for (var i = 0, l = params.length; i < l; i++) {
                    relVal +=
                      "<br/>" +
                      params[i].seriesName +
                      " : " +
                      params[i].value +
                      "V";
                  }
                  return relVal;
                },
                axisPointer: {
                  type: "cross",
                  label: {
                    backgroundColor: "#6a7985"
                  }
                }
              },
              legend: {
                data: ["A相电压", "B相电压", "C相电压"],
                textStyle: {
                  color: "#ffffff"
                }
              },
              toolbox: {},
              grid: {
                top: "15%",
                left: "4%",
                right: "10%",
                bottom: "3%",
                containLabel: true
              },
              xAxis: [
                {
                  type: "category",
                  boundaryGap: false,
                  data: data.xValue.map(function(str) {
                    return str.replace(" ", "\n");
                  }),
                  axisLabel: {
                    textStyle: {
                      fontSize: 14,
                      color: "#fff"
                    }
                  }
                }
              ],
              yAxis: [
                {
                  type: "value",
                  axisLabel: {
                    margin: 10,
                    textStyle: {
                      fontSize: 14,
                      color: "#fff"
                    }
                  },
                  axisLine: {
                    show: false
                  },
                  axisTick: {
                    show: false
                  }
                }
              ],
              series: [
                {
                  name: "A相电压",
                  type: "line",
                  smooth: true,
                  areaStyle: { normal: { width: 1 } },
                  data: data.yAv
                },
                {
                  name: "B相电压",
                  type: "line",
                  smooth: true,
                  areaStyle: { normal: { width: 1 } },
                  data: data.yBv
                },
                {
                  name: "C相电压",
                  type: "line",
                  smooth: true,
                  areaStyle: { normal: { width: 1 } },
                  data: data.yCv
                }
              ]
            }
          };
          if (
            deviceTypeId == "19050000" ||
            deviceTypeId == "01010000" ||
            deviceTypeId == "01020000" ||
            deviceTypeId == "01030000"
          ) {
            //设备类型 电气火灾监控装置 显示电流曲线 电温曲线
            var myChart_zhexian = that.$echarts.init(
              document.getElementById(zheXianContent.containerId)
            );
            var zhexian_echart = myChart_zhexian.setOption(
              zheXianContent.option
            );
            var myChart_mAContent = that.$echarts.init(
              document.getElementById(mAContent.containerId)
            );
            var mAContent_echart = myChart_mAContent.setOption(
              mAContent.option
            );
            var myChart_liuContent = that.$echarts.init(
              document.getElementById(liuContent.containerId)
            );
            var liuContent_echart = myChart_liuContent.setOption(
              liuContent.option
            );
            var myChart_yaContent = that.$echarts.init(
              document.getElementById(yaContent.containerId)
            );
            var yaContent_echart = myChart_yaContent.setOption(
              yaContent.option
            );
          } else if (
            deviceTypeId == "19020000" ||
            deviceTypeId == "19030000" ||
            deviceTypeId == hydrantIndoor ||
            deviceTypeId == hydrantOutUp ||
            deviceTypeId == hydrantOutDown ||
            deviceTypeId == waterEnd ||
            deviceTypeId == "05100000" ||
            deviceTypeId == "05100100" ||
            deviceTypeId == "05100200" ||
            deviceTypeId == "05100300" ||
            deviceTypeId == "19080000"
          ) {
            //设备类型 室内水压监测装置  室外水压加测装置 喷淋末端 显示水压曲线
            var myChart = that.$echarts.init(
              document.getElementById(mpaContent.containerId)
            );
            var mpaContent_echart = myChart.setOption(mpaContent.option);
          } else if (
            deviceTypeId == "19150000" ||
            deviceTypeId == waterPumpCode ||
            deviceTypeId == waterPool ||
            deviceTypeId == waterPump ||
            deviceTypeId == waterTank ||
            deviceTypeId == "05110000"
          ) {
            //水位
            var myChart = that.$echarts.init(
              document.getElementById(waterLevelContent.containerId)
            );
            var waterLevel_echart = myChart.setOption(waterLevelContent.option);
          }
          $(window).resize(function() {
            if (
              deviceTypeId == "19050000" ||
              deviceTypeId == "01010000" ||
              deviceTypeId == "01020000" ||
              deviceTypeId == "01030000"
            ) {
              zhexian_echart.resize();
              mAContent_echart.resize();
              liuContent_echart.resize();
              yaContent_echart.resize();
            } else if (
              deviceTypeId == "19020000" ||
              deviceTypeId == waterEnd ||
              deviceTypeId == "19030000" ||
              deviceTypeId == hydrantIndoor ||
              deviceTypeId == hydrantOutUp ||
              deviceTypeId == hydrantOutDown
            ) {
              mpaContent_echart.resize();
            } else if (
              deviceTypeId == "19150000" ||
              deviceTypeId == waterPumpCode ||
              deviceTypeId == waterPool ||
              deviceTypeId == waterPump ||
              deviceTypeId == waterTank ||
              deviceTypeId == "19080000"
            ) {
              waterLevel_echart.resize();
            }
          });
        });
    },

    //实时读数
    deviceCur(deviceId) {
      $Service
        .getMeasurement(this, { unitId: this.unitId, deviceId: deviceId })
        .then(res => {
          if (res.code) {
            let data = res.data.measurement;
            if (res.code == "success" && data) {
              let html = "";
              data = JSON.parse(data);
              data.forEach(function(value, index, array) {
                if (value != null) {
                  let flagName = value.flagName || "--"; //名称
                  let measurement = value.measurement || "-"; //实时值
                  let unit =
                    value.unit == null
                      ? "-"
                      : value.unit == "undefined"
                      ? "-"
                      : value.unit; //单位
                  html +=
                    "<tr><td style='width: 50%'>" +
                    flagName +
                    "</td><td style='width: 50%'>" +
                    measurement +
                    unit +
                    "</td></tr>";
                }
              });
              $("#curData").html(html);
            }
          }
        });
    }
  }
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
@import "../assets/css/gg.main.css";
.wrap {
  width: 100%;
  height: 100%;
  position: relative;
  .maps {
    width: 100%;
    // height: 100%;
    height: calc(100% - 60px);
  }

  .deviceTypeBox {
    position: absolute;
    bottom: 90px;
    left: 10px;
    z-index: 999;
    color: #fff;
    background: #0c2448;
    border-radius: 5px;
    line-height: 16px;
    font-size: 16px;
  }

  .deviceTypeBox ul {
    overflow: hidden;
    padding: 8px 10px 8px 20px;
    width: 480px;
    margin-top: 30px;
  }

  .deviceTypeBox li {
    float: left;
    width: 230px;
    text-align: left;
    overflow: hidden;
    height: 18px;
	margin-bottom: 5px;
  }

  .deviceTypeBox li img,
  .deviceTypeBox li span {
    vertical-align: middle;
  }

  .deviceTypeBox li img {
    width: 13px;
    margin-right: 5px;
  }

  .deviceTypeIcon {
    width: 115px;
    height: 40px;
    line-height: 40px;
    // float: right;
    right: 0;
    position: absolute;
    text-align: left;
    span{
        margin: 0 6px;
    }
    img {
        position: absolute;
        top: 10px;
        bottom: 10px;
        right: 10px;
        width: 18px;
        cursor: pointer;
    }
  }
  .deviceTypeIconR{
      position: relative;
  }
}
</style>
<style lang="scss">
.olPopup {
  background-color: transparent !important;
}
.olPopupContent {
  padding: 1px;
  overflow: auto;
  text-align: left;
}

.olPopup, .olPopupContent{
  width: 445px !important;
  height: 335px !important;
//   width: 410px !important;
//   height: 300px !important;
}
.olPopupW2,
.olPopupW2 .olPopupContent {
	width: 890px !important;
	height: 335px !important;
    // width: 785px !important;
    // height: 440px !important;
}

.olPopup.olPopupToggle,
.olPopupToggle .olPopupContent{
  width: 465px !important;
  height: 335px !important;
}

.olPopupW2.olPopupToggle,
.olPopupW2.olPopupToggle .olPopupContent{
  width: 910px !important;
	height: 335px !important;
}

.olPopupHeightAlarm{
	width: 445px !important;
	height: 505px !important;
}

.form_wrap {
  width: 1180px;
  height: 40px;
  margin: 0 auto;
  padding-top: 20px;
  color: #fff;
  font-size: 16px;
  .el-input__inner {
    width: 160px;
    background-color: #11425d;
    border: 1px solid #39b7c8;
    color: #fff;
  }
}
.el-button.search_btn,
.el-button.search_btn:focus {
  background: #11425d;
  color: #fff;
  border: 1px solid #39b7c8;
}
.el-button.search_btn:hover {
  background-color: #021c58;
  color: #fff;
  border: 1px solid #39b7c8;
}
.el-popper.el-select-dropdown {
  background-color: #11425d;
  border: 1px solid #39b7c8;
  .el-select-dropdown__item {
    color: #fff;
  }
  .el-select-dropdown__item.selected {
    background-color: #0f2934;
    color: #409eff;
  }
  .el-select-dropdown__item.hover {
    background-color: #0f2934;
  }
}
.el-popper.el-select-dropdown[x-placement^="bottom"] .popper__arrow {
  border-bottom-color: #39b7c8;
}
.el-popper.el-select-dropdown[x-placement^="bottom"] .popper__arrow::after {
  border-bottom-color: #39b7c8;
}

.add-prober-unit {
    height: 135px;
}

// .gg-scroll-tbody table{
// 	width: 100%;
// }


/* 高警情设备列表样式 */
    .gg-warnNum-dialog.gg-prober-pos.heightAlarm-dialog2 {
        height: 504px;
        top: 0;
    }

    .heightAlarm-dialog .gg-prober-header .gg-prober-header--info, .heightAlarm-dialog2 .gg-prober-header .gg-prober-header--info{
        float: none;
        width: 100%;
    }

    .heightAlarm-dialog .heightState, .heightAlarm-dialog2 .heightState{
        width: 100%;
        padding: 0 0 10px 0;
        border-bottom: 1px solid #e8e8e8;
        margin-bottom: 5px;
        font-size: 20px;
        height: 36px;
    }
    .heightStateName{
        display: inline-block;
        margin-top: 4px;
    }
    .heightState .state{
        float: right;
        margin-right: 10px;
        padding: 3px;
        border-radius: 4px;
        background-color: #3e3e3e;
        color: #fff;
    }
    .heightState .state.stateTrue{
        background-color: red;
    }
        

    .gg-switch-content-tips {
        font-size: 14px;
        color: #3e3d3d;
        padding-top: 5px;
    }
    .gg-switch-content-tips>span{
        font-weight: 800;
    }

    .gg-prober-capsule .gg-btn-capsule {
        font-size: 20px;
    }

    h3, .otherFloorDevices h3{
        font-size: 14px;
        color: red;
    }
    .otherFloorDevices h3{
        color:#3c8dbc;
    }
    .HeightAlarmDeviceInfo, .otherFloorDevices .HeightAlarmDeviceInfo{
        position: relative;
        padding-bottom: 5px;
        border-bottom: 1px dashed #ccc;
    }
    .HeightAlarmDeviceInfo:last-of-type, .otherFloorDevices .HeightAlarmDeviceInfo:last-of-type{
        /* padding-bottom: 0; */
        border-bottom: none;
    }
    .HeightAlarmDeviceInfo>div, .otherFloorDevices .HeightAlarmDeviceInfo>div{
        padding-top: 5px;
        color:#fff;
    }
    .HeightAlarmDeviceInfo>div span, .otherFloorDevices .HeightAlarmDeviceInfo>div span{
        margin-left: 5px;
        /* color: #000; */
    }
    .HeightAlarmDeviceInfo .highAlarmType{
        padding: 0 3px;
        color: red;
        border: 1px solid red;
        border-radius: 4px;
    }
    .HeightAlarmDeviceInfo .showOtherBtn, .otherFloorDevices .HeightAlarmDeviceInfo .showOtherBtn{
        position: absolute;
        right: 8px;
        bottom: 8px;
        z-index: 9999;
        outline: none;
        border: none;
        color: #3c8dbc;
        background-color: rgba(0,0,0,0);
        cursor: pointer;
				font-size: 18px;
    }
    .HeightAlarmDeviceInfo .showOtherBtn.selfDeviceBtn{
        color: #5c6266;
        cursor: text;
    }
  div,ul{
    scrollbar-arrow-color: #0d2045; /*三角箭头的颜色*/
    scrollbar-face-color: #00587e; /*滚动条滑块按钮的颜色*/
    scrollbar-highlight-color: #0d2045; /*滚动条整体颜色*/
    scrollbar-shadow-color: #0d2045; /*滚动条阴影*/
    scrollbar-track-color: #0d2045; /*滚动条轨道颜色*/
    scrollbar-3dlight-color: #0d2045; /*滚动条3d亮色阴影边框的外观颜色——左边和上边的阴影色*/
    scrollbar-darkshadow-color: #0d2045; /*滚动条3d暗色阴影边框的外观颜色——右边和下边的阴影色*/
    scrollbar-base-color: #0d2045; /*滚动条基准颜色*/
  }

  .gg-chart-ele, .gg-chart-tem, .gg-chart-liu, .gg-chart-ya{
    margin-left: 45px;
  }
</style>

